微信小程序 目录按字母索引

页面部分

<view class="allSchool">
	<scroll-view class="flex-wrap">
		<scroll-view class="flex-left" scroll-y="true" scroll-with-animation='true' scroll-into-view="{{scrollIntoId}}">
			<view wx:for="{{groups}}" wx:key="zimu" wx:for-item="zimu">
				<view class="alllitem item-a" id="{{zimu.groupName}}">{{zimu.groupName}}</view>
				<view class="aitem">
					<view class="item" wx:for='{{zimu.schoolList}}' wx:for-item='school' wx:key='index'>
						<view class="item_img">
							<image src="{{school.img}}"></image>
						</view>
						<view class="school">
							<view class="s_name">
								{{school.titt}} <text>{{school.sub}} </text>
							</view>
							<view class="s_sub">
								<text wx:if='{{school.type1}}' class="grade">{{school.type1}}</text>
								<text wx:if='{{school.type2}}' class="grade">{{school.type2}}</text>
								<text wx:if='{{school.type2&&item.type1}}' class="grade_q">双一流</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="flex-right">
			<view class="zimulist" bindtouchmove="touchmovefn" bindtouchstart="touchstartfn" bindtap="toId">
				<view class="zimu" wx:for="{{zimu}}" wx:key="ABC" data-id="{{item}}">{{item}}</view>
			</view>
		</view>
	</scroll-view>
</view>

css样式

.item{
  border-bottom: 1rpx solid #f2f2f2;
  width:100%;
  height:160rpx;
  display: flex;
}
.item>view{
  display: inline-block;
}
.item_img{
  width:100rpx;
  height:100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 23rpx;
  margin-top: 30rpx;
}
.item_img>image{
  width:100%;height:100%;
}
.school{
  margin-top:30rpx;
}
.s_name{
  line-height: 50rpx;
  height: 50rpx;
  font-size: 28rpx;
  color:#333;
}
.s_name>text{
  color:#a1a6ad;
  font-size: 24rpx;
  margin-left: 18rpx;
}
.s_sub{
  margin-top:10rpx;
  font-size: 18rpx;
}
.grade{
  display: inline-block;
  width:53rpx;
  height:28rpx;
  background:#f6f7fb;
  line-height: 28rpx;
  text-align: center;
  margin-right: 7rpx;
  border-radius: 3rpx;
  color:#bfc2c2;
}
.grade_q{
  display: inline-block;
  width:73rpx;
  height:28rpx;
  line-height: 26rpx;
  text-align: center;
  border-radius: 3rpx;
  border:1rpx solid #57d1cb;
  color:#57d1cb;
  font-size: 18rpx;
}
/* 所有高校 */
.allSchool{
  height: 66vh;//必须要有高度
}
.zimu{
  width: 50rpx;
  height: 20px;
  line-height: 20px;
}
.zimulist{
  position: fixed;
  top: 80rpx;
  right: 0;
  bottom:0;
  width: 50rpx;
  z-index: 999999999999;
  /* background-color: #fff; */
  text-align: center;
}
.alllitem{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: solid 1rpx #f0f1f2;
  padding-left: 10rpx;
  padding:0 36rpx;

}
.item-a{
  background-color: #f0f1f2;
}
.aitem{
  padding:0 36rpx;
}
.flex-wrap{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.flex-left{
  width: 700rpx;
  height: 100%;
}
.flex-right{
  width: 50rpx;
  height: 100%;
}

js部分

data(){
     zimu: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
    scrollIntoId: 'A',
    groups: [
      {
        groupName: 'A',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      },
      {
        groupName: 'B',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'C',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'D',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'E',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'F',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'G',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'H',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'I',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'J',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'K',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'L',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'M',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'N',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'O',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'P',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'Q',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'R',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'S',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'T',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'U',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'V',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'W',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'X',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'Y',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      }, {
        groupName: 'Z',
        schoolList: [
          { img: "/imgs/1.jpg", titt: "西安交通大学", sub: "部属/公立", type1: '985', type2: '211' },
          { img: "/imgs/2.jpg", titt: "浙江大学 ", sub: "部属/公立", type1: '985', type2: '211' },
        ],
      },
    ]
}
  touchmovefn: function (e) { // 右侧字母检索
    // console.log(e.changedTouches)
    var letterIndex = e.changedTouches['0'].pageY / 20
    // console.log(e)
    // console.log(letterIndex)
    var index = parseInt(letterIndex)
    // console.log(index)
    var letter = this.data.zimu[index]
    // console.log(letter)
    this.setData({
      scrollIntoId: letter
    })
    wx.showToast({
      title: letter,
      icon: "none"
    })
  },
  touchstartfn: function (e) {
    console.log(e);
    var letter = e.target.dataset.id
    this.setData({
      scrollIntoId: letter
    })
    wx.showToast({
      title: letter,
      icon: "none"
    })
  },