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

https://blog.csdn.net/yelin042/article/details/79099733

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

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

 

wcss:

[css] view plain copy

  1. /* pages/order/car/add_car/car_brand/car_brand.wxss */
  2. scroll-view {
  3.   height600px;
  4.     floatleft;
  5.   width94%;
  6. }
  7. .wordindex {
  8.   line-height50rpx;
  9.   background#f7f7f7;
  10.   font-size14px;
  11.   color#929292;
  12.   padding-left28rpx;
  13. }
  14. .color_view {
  15.   text-aligncenter;
  16.   display: inline-flex;
  17.   flex-direction: column;
  18. }
  19. .brand_block {
  20.   margin-top28rpx;
  21.   margin-left28rpx;
  22. }
  23. image {
  24.   width140rpx;
  25.   height140rpx;
  26.   margin-right24rpx;
  27.   margin-bottom24rpx;
  28.   border-stylesolid;
  29.   border-width1rpx;
  30.   border-color#ededed;
  31. }
  32. .index {
  33.   floatright;
  34.   positionfixed;
  35.   right: 0;
  36.   margin-top20%;
  37.   margin-right10rpx;
  38.   color#e0004a;
  39.   font-size11px;
  40. }
  41. .index text {
  42.   display: flex;
  43.   line-height18rpx;
  44. }

 

其中有几个点需要注意

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

如下图

所以当我走完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.         })

发表评论

电子邮件地址不会被公开。 必填项已用*标注