效果图：
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 }) }) },
点击右侧的字母会自动滚动到对应的位置。
