微信小程序通讯录首字母索引效果，车辆品牌选择列表

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

效果图：

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:; width: 30px; height: 100%; background: #eee;

  display: flex; flex-flow: column;}

.letters text{ display: block; font-size: 14px; color: #666; text-align: center; flex:;}

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

      })

    })

  },