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

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

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

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

话不多说,看代码

wxml

<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

// 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:

/* 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..

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