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

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

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

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

话不多说,看代码

wxml

 

[html] view plain copy

<scroll-view scroll-y="true" scroll-into-view="{{toView}}">    <view class="brand" wx:for="{{brandList}}">      <view class="line"></view>      <view id="{{item.wordindex}}" class="wordindex">{{item.wordindex}}</view>      <view class="line"></view>      <view class="brand_block">        <view class="color_view" wx:for="{{item.brand}}" bindtap="click">          <image src="{{item.brandimg}}"></image>        </view>      </view>    </view>  </scroll-view>  <view class="index">    <text wx:for="{{wordindex}}" bindtap="choiceWordindex" data-wordindex="{{item.wordindex}}">      {{item.wordindex}}    </text>  </view>  

wxjs

 

 

[javascript] view plain copy

// pages/order/car/add_car/car_brand/car_brand.js  var app = getApp()  Page({    data: {      "brandList": [],      "wordindex": [],      "toView": '#',      },    onLoad: function (options) {      var that = this;      // 页面初始化 options为页面跳转所带来的参数      app.func.req('getCarBrand?cx=1', function (res) {        if (res.data.result == 'false') {          console.log('false');          that.wetoast.toast({            title: res.data.msg,            duration: 2000          })        } else {          that.setData({            brandList: res.data.brandList,            wordindex: res.data.brandList,          });          var cData = that.data.brandList;          cData[0].wordindex = "#";//先修改json值          that.setData({ //再set值            wordindex: cData          })        }      }, function (res) {        });      },    onReady: function () {      // 页面渲染完成    },    onShow: function () {      // 页面显示    },    onHide: function () {      // 页面隐藏    },    onUnload: function () {      // 页面关闭    },    click: function () {      wx.navigateTo({        url: '/pages/order/car/add_car/car_model/car_model',      })    },    choiceWordindex: function (event) {      let wordindex = event.currentTarget.dataset.wordindex;      if (wordindex == '#') {        this.setData({          toView: '常用品牌',        })      } else {        this.setData({          toView: wordindex,        })      }        console.log(this.data.toView);    }  })  

 

 

wcss:

 

[css] view plain copy

/* pages/order/car/add_car/car_brand/car_brand.wxss */  scroll-view {    height: 600px;      float: left;    width: 94%;  }       .wordindex {    line-height: 50rpx;    background: #f7f7f7;      font-size: 14px;    color: #929292;    padding-left: 28rpx;  }    .color_view {    text-align: center;    display: inline-flex;    flex-direction: column;  }    .brand_block {    margin-top: 28rpx;    margin-left: 28rpx;  }    image {    width: 140rpx;    height: 140rpx;    margin-right: 24rpx;    margin-bottom: 24rpx;    border-style: solid;    border-width: 1rpx;    border-color: #ededed;  }    .index {    float: right;    position: fixed;    right: 0;    margin-top: 20%;    margin-right: 10rpx;    color: #e0004a;    font-size: 11px;  }    .index text {    display: flex;    line-height: 18rpx;  }  

 

 

其中有几个点需要注意

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

如下图

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

那么问题来了

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

see it..

 

[javascript] view plain copy

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

转载： 东边的小山