格式比较类似于之前的城市选择，但是之前的城市选择格式有些太过繁琐了，然后看到了一篇比较好的处理方式，是采用节点查询的方法来找到左侧字母的定位，而且页面上的渲染也简单了很多，我觉得是一篇很棒的文章就摘录下来了，此篇文章为转载，先附上转载的链接地址 微信小程序通讯录首字母索引效果，车辆品牌选择列表
还是先看一下页面的实现效果
车辆品牌选择.gif
代码代码，需要向前辈好好学习
-
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>
-
WXSS
page {
width: 100%;
height: 100%;
}
.letter {
background: #ccc;
font-size: 14px;
padding-left: 10px;
}
.item {
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #eee;
}
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
var app = getApp()
Page({
data: {
},
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
query.select(id).boundingClientRect() //这段代码的意思是选择Id = id的节点，获取节点位置信息的查询请求
query.selectViewport().scrollOffset() ////这段代码的意思是获取页面滑动位置的查询请求
query.exec(function (res) {
// res[0].top // id节点的上边界坐标
// res[1].scrollTop // 显示区域的竖直滚动位置
wx.pageScrollTo({
scrollTop: res[0].top + res[1].scrollTop,
duration: 300
})
})
},
})
