微信小程序：首字母索引

效果图

js：

// 引入数据
import list from '../../utils/list.js'
//定义索引字母数组
var indexArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
var y = 0;
//获取touchstart字母数组角标
function getArrIndex(english) {
  // console.log(Page)
  for (var x = 0; x < indexArr.length; x++) {
    if (english == indexArr[x]) {
      return x;
    }
  }
}
//num 移动了多少位 index 当前字母,返回当前触摸位置节点的字母
function getArrEnglish(num, index) {
  var english = indexArr[index + num];
  if (!(1 > num + index > 26)) {
    return english;
  } else {
    return AAA;
  }
}
Page({
  data: {
    rightShow: false,
    dropShow: false,
    indexShow: false,
    toView: "e",
    scrollTop: 1000,
    indexId: "",
    indexy: "",
    indexEnglish: "",
    arrId: indexArr,
    list: list
  },
  touchstart: function(e) {
    this.setData({
      indexId: e.target.id,
      toView: e.target.id.toLowerCase(),
      indexy: e.touches[0].pageY,
      indexShow: true,
      indexEnglish: e.target.id
    })
  },
  touchmove: function(e) {
    y = getArrIndex(e.target.id);
    var indexY = e.touches[0].pageY;
    if (getArrEnglish(Math.round((indexY - this.data.indexy) / 15), y)) {
      this.setData({
        toView: getArrEnglish(Math.round((indexY - this.data.indexy) / 15), y).toLowerCase(),
        indexEnglish: getArrEnglish(Math.round((indexY - this.data.indexy) / 15), y)
      })
    }
  },
  touchend: function(e) {
    this.setData({
      indexShow: false
    })
  },
  onLoad: function(options) {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          windowHeight: res.windowHeight,
          indexTop: res.windowHeight / 2 - 200
        });
      }
    })
  },
  onReady: function() {
    // 页面渲染完成
  },
  onShow: function() {
    // 页面显示
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  }
})

list：

const list = [{
  id: 'a',
  head: 'A',
  children: [{
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }]
}, {
  id: 'b',
  head: 'B',
  children: [{
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }]
}, 


……//中间省略


{
  id: 'z',
  head: 'Z',
  children: [{
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }, {
    text: '数据',
  }]
}, ]
export default list

注意：

list位于utils下

list位置

wxml：

<scroll-view scroll-y="true" style="height:{{windowHeight}}px;" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <block wx:for="{{list}}" wx:key="{{item.id}}">
    <view class="search-english" id="{{item.id}}">
      {{item.head}}
    </view>
    <view class="search-car" wx:for="{{item.children}}" wx:key="{{idx}}" bindtap="showRequire" wx:for-item="child" wx:for-index="idx">
 {{idx}}: {{child.text}}
    </view>
  </block>
</scroll-view>
<view class="index-english" style="top:{{indexTop}}px">
  <view wx:for="{{arrId}}" wx:key="{{i}}" wx:for-item="i" id="{{i}}" catchtouchstart="touchstart" catchtouchmove="touchmove" catchtouchend="touchend">{{i}}</view>
</view>
<view class="index-name" wx:if="{{indexShow}}">{{indexEnglish}}</view>

wxss:

.search-car{
    height: 80rpx;
    line-height: 80rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #e6e6e6;
}
.search-english{
    height: 40rpx;
    background-color: #f0f0f0;
    line-height: 40rpx;
    padding-left: 20rpx;
    font-size: 28rpx;
    color: #000000;
}
scroll-view{
    z-index: 20;
}
image{
    height: 75rpx;
    width: 75rpx;
    display: inline-block;
    vertical-align: middle;
}
.index-english{
    position: absolute;
    width: 30rpx;
    height: auto;
    right: 0;
    font-size: 10px;
}
.index-english view{
    height: 15px;
}
.index-name{
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #000000;
    width: 100px;
    height: 100px;
    font-size: 48px;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 100px;
}

参考：

微信小程序字母检索-indexList
https://github.com/petsgre/indexList