微信小程序根据字母索引选择(仿京东)

效果图如下所示

仿京东微信小程序视频请加QQ:1010753897
下载地址：https://download.csdn.net/download/qq_43764578/12314561

.wxml

<scroll-view bindscroll="scroll" scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style="height:100vh" scroll-with-animation="true" enable-back-to-top="true">
   <view class="padgind-clin">{{brand[0].detail[0].list[tabgisc].uid}}</view>
  <block wx:for="{{brand[0].detail[0].list}}" wx:key="index">
    <view class="padding indexItem-{{list[index]}}" style="{{tabgisc == index?'color:#E23E3E;':''}}" id="indexes-{{list[index]}}" data-index="{{list[index]}}">{{item.uid}}</view>
    <view class="cu-list">
      <view class="cu-guinv" wx:for="{{item.dev}}" data-uid="{{item.id}}" wx:key="index">
        <view>{{item.name}}</view>
      </view>
    </view>
  </block>
</scroll-view>
  <view class="indexBar">
  <view class="indexBar-box" bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove">
    <view class="indexBar-item" wx:for="{{list}}" wx:key="index" id="{{index}}" bindtouchstart="getCur" bindtouchend="setCur" data-index="{{index}}" style="{{tabgisc == index?'color:#E23E3E;':''}}">{{list[index]}}</view>
  </view>
</view>
<view hidden="{{hidden}}" class="indexToast">
  {{listCur}}
</view>

.wxss

view{
  box-sizing: border-box;
}
.indexBar {
  position: fixed;
  top: 40rpx;
  right: 0;
  padding: 20rpx 20rpx 20rpx 60rpx;
  display: flex;
  align-items: center;
}
.indexBar .indexBar-box {
  width: 40rpx;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
}
.indexBar-item {
  flex: 1;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #888;
}
.padding{
  padding: 0 30rpx;
  height: 30px;
  line-height: 30px;
  width: 100%;
  background-color: #F7F7F7;
  float: left;
}
.cu-list{
  width: 100%;
  float: left;
  overflow: hidden;
  background-color: #fff;
}
.cu-guinv{
  width: 100%;
  float: left;
  height: 50px;
  line-height: 50px;
  padding: 0 30rpx;
  border-bottom: 1px solid #ccc;
}
.indexToast{
  position: fixed;
  right: 80rpx;
  bottom:50%;
  background: rgba(0, 0, 0, 0.5);
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin: auto;
  color: #fff;
  line-height: 100rpx;
  text-align: center;
  font-size: 48rpx;
}
.padgind-clin{
  position:fixed;
  color:#E23E3E;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 30rpx;
  background-color: #F7F7F7;
  z-index: 100;
}

.js

Page({
  data: {
    hidden: true,
    tabgisc: '0',
    brand: [
        {detail: [
          {
            name: '字母排序', 
            list: [
            {
              uid: 'A', dev: [
                { id: '1', name: '艾诺（AILUO）', usname: false }, { id: '2', name: '西罗（CILORE）', usname: false },
                { id: '3', name: '宾卡达（BINKADA）', usname: false },
              ]
            },
            {
              uid: 'B', dev: [
                { id: '4', name: '海鸥（SEAGULL）', usname: false },
                { id: '5', name: '名拓（MINGTUO）', usname: false }, { id: '6', name: '卡罗莱（CALUOLA）', usname: false },
                { id: '7', name: '劳士顿（ROSDN）', usname: false }, { id: '8', name: '名仕爵（MSTRE）', usname: false },
              ]
            },
            {
              uid: 'C', dev: [
                { id: '9', name: 'aaa1', usname: false },
                { id: '10', name: 'aaa2', usname: false },
              ]
            },
            {
              uid: 'D', dev: [
                { id: '11', name: 'aaa3', usname: false },
                { id: '12', name: 'aaa4', usname: false },
                { id: '13', name: 'aaa5', usname: false },
              ]
            },
            {
              uid: 'E', dev: [
                { id: '14', name: 'aaa6', usname: false },
                { id: '15', name: 'aaa7', usname: false },
                { id: '16', name: 'aaa8', usname: false },
              ]
            },
            {
              uid: 'F', dev: [
                { id: '17', name: 'aaa9', usname: false },
                { id: '18', name: 'aaa10', usname: false },
                { id: '19', name: 'aaa11', usname: false },
              ]
            },
            {
              uid: 'G', dev: [
                { id: '20', name: 'aaa12', usname: false },
                { id: '21', name: 'aaa13', usname: false },
                { id: '22', name: 'aaa14', usname: false },
              ]
            },
            {
              uid: 'H', dev: [
                { id: '23', name: 'aaa15', usname: false },
                { id: '24', name: 'aaa16', usname: false },
                { id: '25', name: 'aaa17', usname: false },
              ]
            },
            {
              uid: 'I', dev: [
                { id: '26', name: 'aaa18', usname: false },
                { id: '27', name: 'aaa19', usname: false },
                { id: '28', name: 'aaa20', usname: false },
                { id: '29', name: 'aaa21', usname: false },
                { id: '30', name: 'aaa22', usname: false },
              ]
            },
            {
              uid: 'J', dev: [
                { id: '31', name: 'aaa23', usname: false },
                { id: '32', name: 'aaa24', usname: false },
                { id: '33', name: 'aaa25', usname: false },
                { id: '34', name: 'aaa26', usname: false },
                { id: '35', name: 'aaa27', usname: false },
              ]
            },
            {
              uid: 'k', dev: [
                { id: '74', name: 'aaa66', usname: false },
              ]
            },
            {
              uid: 'L', dev: [
                { id: '36', name: 'aaa28', usname: false },
                { id: '37', name: 'aaa29', usname: false },
                { id: '38', name: 'aaa30', usname: false },
                { id: '39', name: 'aaa31', usname: false },
                { id: '40', name: 'aaa32', usname: false },
              ]
            },
            {
              uid: 'M', dev: [
                { id: '41', name: 'aaa33', usname: false },
              ]
            },
            {
              uid: 'N', dev: [
                { id: '42', name: 'aaa34', usname: false },
                { id: '43', name: 'aaa35', usname: false },
                { id: '44', name: 'aaa36', usname: false },
              ]
            },
            {
              uid: 'O', dev: [
                { id: '45', name: 'aaa37', usname: false },
                { id: '46', name: 'aaa38', usname: false },
              ]
            },
            {
              uid: 'P', dev: [
                { id: '47', name: 'aaa39', usname: false },
              ]
            },
            {
              uid: 'Q', dev: [
                { id: '48', name: 'aaa40', usname: false },
                { id: '49', name: 'aaa41', usname: false },
                { id: '50', name: 'aaa42', usname: false },
              ]
            },
            {
              uid: 'R', dev: [
                { id: '51', name: 'aaa43', usname: false },
              ]
            },
            {
              uid: 'S', dev: [
                { id: '52', name: 'aaa44', usname: false },
              ]
            },
            {
              uid: 'T', dev: [
                { id: '53', name: 'aaa45', usname: false },
                { id: '54', name: 'aaa46', usname: false },
              ]
            },
            {
              uid: 'U', dev: [
                { id: '55', name: 'aaa47', usname: false },
              ]
            },
            {
              uid: 'V', dev: [
                { id: '56', name: 'aaa48', usname: false },
              ]
            },
            {
              uid: 'W', dev: [
                { id: '57', name: 'aaa49', usname: false },
                { id: '58', name: 'aaa50', usname: false },
              ]
            },
            {
              uid: 'X', dev: [
                { id: '59', name: 'aaa51', usname: false },
              ]
            },
            {
              uid: 'Y', dev: [
                { id: '60', name: 'aaa52', usname: false },
                { id: '61', name: 'aaa53', usname: false },
              ]
            },
            {
              uid: 'Z', dev: [
                { id: '62', name: 'aaa54', usname: false },
                { id: '63', name: 'aaa55', usname: false },
                { id: '64', name: 'aaa56', usname: false },
                { id: '65', name: 'aaa57', usname: false },
                { id: '66', name: 'aaa58', usname: false },
                { id: '67', name: 'aaa59', usname: false },
                { id: '68', name: 'aaa60', usname: false },
                { id: '69', name: 'aaa61', usname: false },
                { id: '70', name: 'aaa62', usname: false },
                { id: '71', name: 'aaa63', usname: false },
                { id: '72', name: 'aaa64', usname: false },
                { id: '73', name: 'aaa65', usname: false },
              ]
            },
          ]
          }]}
    ]
  },
  onLoad:function(options){
    let list = [];
    for (let i = 0; i < 26; i++) {
      list[i] = String.fromCharCode(65 + i)
    }
    this.setData({
      list: list,
      listCur: list[0]
    })
  },
  onReady() {
    let that = this;
    wx.createSelectorQuery().select('.indexBar-box').boundingClientRect(function (res) {
      that.setData({
        boxTop: res.top
      })
    }).exec();
    wx.createSelectorQuery().select('.indexes').boundingClientRect(function (res) {
      that.setData({
        barTop: res.top
      })
    }).exec()
  },
  //获取文字信息
  getCur(e) {
    this.setData({
      hidden: false,
      listCur: this.data.list[e.target.id],
    })
  },
  setCur(e) {
    this.data.tabgisc = e.currentTarget.dataset.index
    this.setData({
      hidden: true,
      listCur: this.data.listCur,
      tabgisc: this.data.tabgisc
    })
  },
  //滑动选择Item
  tMove(e) {
    let y = e.touches[0].clientY,
      offsettop = this.data.boxTop,
      that = this;
    //判断选择区域,只有在选择区才会生效
    if (y > offsettop) {
      let num = parseInt((y - offsettop) / 20);
      this.setData({
        listCur: that.data.list[num]
      })
    };
  },
  //触发全部开始选择
  tStart() {
    this.setData({
      hidden: false
    })
  },
  //触发结束选择
  tEnd() {
    this.setData({
      hidden: true,
      listCurID: this.data.listCur
    })
  },
  scroll: function (e) {
    let num = []
    let title = []
    let b = 0
    let c = 0;
    let detail = this.data.brand[0].detail[0].list
    for (let i = 0; i < detail.length; i++) {
      num.push(parseInt(detail[i].dev.length) * 50 + 30)
    }
    for (let k = 1; k < num.length; k++) {
      for (let j = k - 1; j < k; j++) {
        title.push(b += parseInt(num[j]))
      }
    }
    title.unshift(0);
    for (let g = 0; g < title.length; g++) {
      if (title[g] <= e.detail.scrollTop) {
        c = g
      }
    }
    this.setData({
      tabgisc: c
    })
  },
})

有什么问题欢迎评论留言，我会及时回复你的