微信小程序 scroll-view滚动到索引位置

有一些重要的关键点请看上一篇文章

微信小程序-scroll-view滚动到指定位置(一)

主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可

话不多说,看代码

wxml

[html]  view plain  copy

1. <scroll-view scroll-y="true" scroll-into-view="{{toView}}">  
2.   <view class="brand" wx:for="{{brandList}}">  
3.     <view class="line"></view>  
4.     <view id="{{item.wordindex}}" class="wordindex">{{item.wordindex}}</view>  
5.     <view class="line"></view>  
6.     <view class="brand_block">  
7.       <view class="color_view" wx:for="{{item.brand}}" bindtap="click">  
8.         <image src="{{item.brandimg}}"></image>  
9.       </view>  
10.     </view>  
11.   </view>  
12. </scroll-view>  
13. <view class="index">  
14.   <text wx:for="{{wordindex}}" bindtap="choiceWordindex" data-wordindex="{{item.wordindex}}">  
15.     {{item.wordindex}}  
16.   </text>  
17. </view>  

wxjs

[javascript]  view plain  copy

1. // pages/order/car/add_car/car_brand/car_brand.js  
2. var app = getApp()  
3. Page({  
4.   data: {  
5.     "brandList": [],  
6.     "wordindex": [],  
7.     "toView": '#',  
8.   
9.   },  
10.   onLoad: function (options) {  
11.     var that = this;  
12.     // 页面初始化 options为页面跳转所带来的参数  
13.     app.func.req('getCarBrand?cx=1', function (res) {  
14.       if (res.data.result == 'false') {  
15.         console.log('false');  
16.         that.wetoast.toast({  
17.           title: res.data.msg,  
18.           duration: 2000  
19.         })  
20.       } else {  
21.         that.setData({  
22.           brandList: res.data.brandList,  
23.           wordindex: res.data.brandList,  
24.         });  
25.         var cData = that.data.brandList;  
26.         cData[0].wordindex = "#";//先修改json值  
27.         that.setData({ //再set值  
28.           wordindex: cData  
29.         })  
30.       }  
31.     }, function (res) {  
32.   
33.     });  
34.   
35.   },  
36.   onReady: function () {  
37.     // 页面渲染完成  
38.   },  
39.   onShow: function () {  
40.     // 页面显示  
41.   },  
42.   onHide: function () {  
43.     // 页面隐藏  
44.   },  
45.   onUnload: function () {  
46.     // 页面关闭  
47.   },  
48.   click: function () {  
49.     wx.navigateTo({  
50.       url: '/pages/order/car/add_car/car_model/car_model',  
51.     })  
52.   },  
53.   choiceWordindex: function (event) {  
54.     let wordindex = event.currentTarget.dataset.wordindex;  
55.     if (wordindex == '#') {  
56.       this.setData({  
57.         toView: '常用品牌',  
58.       })  
59.     } else {  
60.       this.setData({  
61.         toView: wordindex,  
62.       })  
63.     }  
64.   
65.     console.log(this.data.toView);  
66.   }  
67. })  

wcss:

[css]  view plain  copy

1. /* pages/order/car/add_car/car_brand/car_brand.wxss */  
2. scroll-view {  
3.   height: 600px;  
4.     float: left;  
5.   width: 94%;  
6. }  
7.    
8.   
9. .wordindex {  
10.   line-height: 50rpx;  
11.   background: #f7f7f7;  
12.   
13.   font-size: 14px;  
14.   color: #929292;  
15.   padding-left: 28rpx;  
16. }  
17.   
18. .color_view {  
19.   text-align: center;  
20.   display: inline-flex;  
21.   flex-direction: column;  
22. }  
23.   
24. .brand_block {  
25.   margin-top: 28rpx;  
26.   margin-left: 28rpx;  
27. }  
28.   
29. image {  
30.   width: 140rpx;  
31.   height: 140rpx;  
32.   margin-right: 24rpx;  
33.   margin-bottom: 24rpx;  
34.   border-style: solid;  
35.   border-width: 1rpx;  
36.   border-color: #ededed;  
37. }  
38.   
39. .index {  
40.   float: right;  
41.   position: fixed;  
42.   right: 0;  
43.   margin-top: 20%;  
44.   margin-right: 10rpx;  
45.   color: #e0004a;  
46.   font-size: 11px;  
47. }  
48.   
49. .index text {  
50.   display: flex;  
51.   line-height: 18rpx;  
52. }  

其中有几个点需要注意

由于我获取的接口数据第一个数组为常用品牌,而右边所以呢为#

如下图

所以当我走完onLoad()生命周期的时候, 我写了两个数组, 一个数组负责左边的title , 一个数组负责右边索引

那么问题来了

当你右边索引数组中,其中一个值改变的时候应该怎么变呢

see it..

[javascript]  view plain  copy

1. var cData = that.data.brandList;  
2.         cData[0].wordindex = "#";//先修改json值  
3.         that.setData({ //再set值  
4.           wordindex: cData  
5.         })