微信小程序车辆品牌选择

格式比较类似于之前的城市选择，但是之前的城市选择格式有些太过繁琐了，然后看到了一篇比较好的处理方式，是采用节点查询的方法来找到左侧字母的定位，而且页面上的渲染也简单了很多，我觉得是一篇很棒的文章就摘录下来了，此篇文章为转载，先附上转载的链接地址 微信小程序通讯录首字母索引效果，车辆品牌选择列表

还是先看一下页面的实现效果

车辆品牌选择.gif

代码代码，需要向前辈好好学习

• WXML

  {{index}}
  
  {{idx.name}}
  
  

  {{index}}

• 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
      })
    })
  },
})