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

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

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

所用组件： 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， 下次见

是