摘要： 小程序索引选择器，点击跳转相应条目，索引可滑动，滑动也可跳转
场景：城市选择列表， 汽车品牌选择列表
所用组件： scroll-view（小程序原生）
我要评论 1 list: [
2 {
3 "letter": "a",
4 "list": [{
5 "name": "奥迪1",
6 "id": 1
7 },
8 {
9 "name": "奥迪2",
10 "id": 2
11 }]
12 },
13 {
14 "letter": "b",
15 "list": [{
16 "name": "宝马1",
17 "id": 3
18 },
19 {
20 "name": "宝马2",
21 "id": 4
22 }]
23 },
24 {
25 "letter": "c",
26 "list": [{
27 "name": "麻喇沙底",
28 "id": 5
29 },
30 {
31 "name": "adidas",
32 "id": 6
33 }]
34 },
35 {
36 "letter": "d",
37 "list": [{
38 "name": "煲事件",
39 "id": 7
40 },
41 {
42 "name": "保时捷",
43 "id": 8
44 }]
45 },
46 {
47 "letter": "e",
48 "list": [{
49 "name": "宝马1",
50 "id": 9
51 },
52 {
53 "name": "宝马2",
54 "id": 10
55 }]
56 },
57 {
58 "letter": "f",
59 "list": [{
60 "name": "宝马1",
61 "id": 11
62 },
63 {
64 "name": "宝马2",
65 "id": 12
66 }]
67 },
68 {
69 "letter": "g",
70 "list": [{
71 "name": "宝马1",
72 "id": 15
73 },
74 {
75 "name": "宝马2",
76 "id": 16
77 }]
78 },
79 {
80 "letter": "h",
81 "list": [{
82 "name": "宝马1",
83 "id": 17
84 },
85 {
86 "name": "宝马2",
87 "id": 18
88 }]
89 },
90 {
91 "letter": "i",
92 "list": [{
93 "name": "宝马1",
94 "id": 19
95 },
96 {
97 "name": "宝马2",
98 "id": 20
99 }]
100 },
101 {
102 "letter": "j",
103 "list": [{
104 "name": "宝马1",
105 "id": 21
106 },
107 {
108 "name": "宝马2",
109 "id": 22
110 }]
111 },
112 {
113 "letter": "k",
114 "list": [{
115 "name": "宝马1",
116 "id": 23
117 },
118 {
119 "name": "宝马2",
120 "id": 24
121 }]
122 },
123 ]
html 结构：
主体部分
1 <scroll-view class="content" scroll-y="true" :style="scrollheight" :scroll-top="scrolldata.scrolltop" :scroll-into-view="toview">
2 <ul class="brandlist">
3 <li v-for="(item, index) in list" :key="index" :id="item.letter">
4 <h2>{{item.letter}}</h2>
5 <div v-for="(el, i) in item.list" :key="i" class="pro" @click="gettoast(el.name)">
6 <img src="/static/images/user.png" alt="" mode="aspectfit">
7 <span>{{el.name}}</span>
8 </div>
9 </li>
10 </ul>
11 </scroll-view>
1 // 侧边导航栏
2 <div class="letterlist" @touchstart="handlertouchmove"
3 @touchmove="handlertouchmove"
4 @touchend="handlertouchend" :style="fixedtop">
5 <p v-for="(item, index) in list" :key="index" @click="getletter(item.letter)">{{item.letter}}</p>
6 </div>
scrolldata: {
scrolltop: 0,
},
toview:'a',
step1：
首先，侧边导航栏肯定是用fixed定位固定（一般在右侧），其次在竖直方向居中，调用wx.getsysteminfo
1 let fixedtop = 0;
2 let length = this.list.length // 取到list数组的length，因为list的length决定了侧边导航的高度
3 wx.getsysteminfo({
4 success(res) {
5 fixedtop = (res.windowheight - (20 * length))/2 //20为侧边导航每个p的高度
6 }
7 })
step2
手指在侧边导航滑动时的js
1 handlertouchmove (e) {
2 let touches = e.touches[0] || {}
3 let pagey = touches.pagey
4 let rest = pagey - this.fixedtop
5 let index = math.ceil(rest / 20)
6 console.log(this.list.length, index, 206);
7 console.log(index,195);
8 if(index > this.list.length) {
9 index = this.list.length - 1//
10 }
11 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
1 getletter (letter) {
2 this.toview = letter
3 },
结束惹，88， 下次见
是
如对本文有疑问， 点击进行留言回复！！
网友评论