【微信小程序】手写索引选择器（城市列表，汽车品牌选择列表）

摘要： 小程序索引选择器，点击跳转相应条目，索引可滑动，滑动也可跳转

场景：城市选择列表， 汽车品牌选择列表

所用组件： scroll-view（小程序原生） https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

所用API：  wx.getSystemInfo     https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html

使用技术： 组件 + API + 一个简单的 计算

效果示意：

 

 

本例 数据结构：（你可以把你的数据改成这种结构，当然，掌握方法后可自行调整）

list: [
            {
              "letter": "A",
              "list": [{
                "name": "奥迪1",
                "id": 1
              },
              {
                "name": "奥迪2",
                "id": 2
              }]
            },
            {
              "letter": "B",
              "list": [{
                "name": "宝马1",
                "id": 3
              },
              {
                "name": "宝马2",
                "id": 4
              }]
            },
            {
              "letter": "C",
              "list": [{
                "name": "麻喇沙底",
                "id": 5
              },
              {
                "name": "adidas",
                "id": 6
              }]
            },
            {
              "letter": "D",
              "list": [{
                "name": "煲事件",
                "id": 7
              },
              {
                "name": "保时捷",
                "id": 8
              }]
            },
            {
              "letter": "E",
              "list": [{
                "name": "宝马1",
                "id": 9
              },
              {
                "name": "宝马2",
                "id": 10
              }]
            },
            {
              "letter": "F",
              "list": [{
                "name": "宝马1",
                "id": 11
              },
              {
                "name": "宝马2",
                "id": 12
              }]
            },
            {
              "letter": "G",
              "list": [{
                "name": "宝马1",
                "id": 15
              },
              {
                "name": "宝马2",
                "id": 16
              }]
            },
            {
              "letter": "H",
              "list": [{
                "name": "宝马1",
                "id": 17
              },
              {
                "name": "宝马2",
                "id": 18
              }]
            },
            {
              "letter": "I",
              "list": [{
                "name": "宝马1",
                "id": 19
              },
              {
                "name": "宝马2",
                "id": 20
              }]
            },
            {
              "letter": "J",
              "list": [{
                "name": "宝马1",
                "id": 21
              },
              {
                "name": "宝马2",
                "id": 22
              }]
            },
            {
              "letter": "K",
              "list": [{
                "name": "宝马1",
                "id": 23
              },
              {
                "name": "宝马2",
                "id": 24
              }]
            },
          ]

 html 结构：

主体部分

<scroll-view class="content" scroll-y="true" :style="scrollHeight" :scroll-top="scrollData.scrollTop" :scroll-into-view="toView">
      <ul class="brandList">
        <li v-for="(item, index) in list" :key="index" :id="item.letter">
          <h2>{{item.letter}}</h2>
          <div v-for="(el, i) in item.list" :key="i" class="pro" @click="getToast(el.name)">
            <img src="/static/images/user.png" alt="" mode="aspectFit">
            <span>{{el.name}}</span>
          </div>
        </li>
      </ul>
    </scroll-view>

// 侧边导航栏
<div class="letterList" @touchstart="handlerTouchMove" 
        @touchmove="handlerTouchMove" 
        @touchend="handlerTouchEnd" :style="fixedTop">
      <p v-for="(item, index) in list" :key="index" @click="getLetter(item.letter)">{{item.letter}}</p>
    </div>

 

 js初始数据：

scrollData: {
        scrollTop: 0,
      },
      toView:'A',

step1： 

首先，侧边导航栏肯定是用fixed定位固定（一般在右侧），其次在竖直方向居中，调用wx.getSystemInfo 

 

let fixedTop = 0;
      let length = this.list.length // 取到list数组的length，因为list的length决定了侧边导航的高度
      wx.getSystemInfo({
        success(res) {
          fixedTop = (res.windowHeight - (20 * length))/2  //20为侧边导航每个p的高度
        }
      })

 

step2

手指在侧边导航滑动时的js

handlerTouchMove (e) {
      let touches = e.touches[0] || {}
      let pageY = touches.pageY
      let rest = pageY - this.fixedTop
      let index = Math.ceil(rest / 20)
      console.log(this.list.length, index, 206);
      console.log(index,195);
      if(index > this.list.length) {
        index = this.list.length - 1// 
      }
      if( 0 <index <= this.list.length) { // 1213  10  9
12         index = index - 1
13       }
14       if(index <= 0) {
15         index = 0
16       }
17       let letter = this.list[index].letter
18       wx.showToast({
19         title: letter,
20         icon: 'none',
21         duration: 2000
22       })
23       this.toView = letter
24     },
25     handlerTouchEnd () {
26       wx.hideLoading()
27     },

 

step3

点击侧边索引时的js

    getLetter (letter) {
      this.toView = letter
    },

 

结束惹，88， 下次见

是