微信小程序通訊錄首字母索引效果，車輛品牌選擇列表

效果圖：

 

wxml代碼：

  <block wx:for="{{list}}">
  <view class='letter' id="letter{{index}}">{{index}}</view>
  <view class='item' wx:for="{{item}}" wx:for-item="idx">
  {{idx.name}}
  </view>
  </block>

<view class='letters'>
  <text wx:for="{{list}}" bindtap='chooseLetter' data-letter="{{index}}">{{index}}</text>
</view>

 

WCSS代碼：

.letter{ background: #ccc; font-size: 14px; padding-left: 10px;}
.item{ line-height: 40px; padding: 0 10px; border-bottom: 1px solid #eee;}
page{ width: 100%; height: 100%;}
scroll-view{ width: 100%; height: 100%;}
.letters{ position: fixed; top: 0px; right: 0; width: 30px; height: 100%; background: #eee;
  display: flex; flex-flow: column;}
.letters text{ display: block; font-size: 14px; color: #666; text-align: center; flex:1;}

 

js代碼

onLoad: function (options) {
    var that = this;
    wx.request({
      url: 'http://api.besttool.cn/?c=Car&a=brandlist',
      method:'post',
      header:{
        'content-type': 'application/x-www-form-urlencoded'
      },
      data:{
        appid:1,
        secret:'d90824a5a8224fd7bb4fdffd331c62aa'
      },
      success(res){
        console.log(res);
        that.setData({ list: res.data.brandlist});
      }
    })
  },

  chooseLetter(e){
    this.setData({
      curLetter: null
    });
    var letter = e.currentTarget.dataset.letter;
    console.log(letter);

    // 查找對應的id
    var id = "#letter" + letter;
    const query = wx.createSelectorQuery()
    query.select(id).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      wx.pageScrollTo({
        scrollTop: res[0].top + res[1].scrollTop,
        duration: 300
      })
    })
  },

點擊右側的字母會自動滾動到對應的位置。