微信小程序通讯录首字母索引效果,车辆品牌选择列表
效果图:
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 }) }) },
点击右侧的字母会自动滚动到对应的位置。