微信小程序-scroll-view滚动到指定位置(类似锚点)

2017-01-11

先来说一下官网例子吧 API 自己看咯


 https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122


微信小程序-scroll-view滚动到指定位置(类似锚点)

有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~

  1. html中

    1. scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;"  必须..

    2. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号

  2. js中

    1.  "toView","scrollTop"必须设置值

    2. "scrollTop": 0,必须为数值
         

微信小程序-scroll-view滚动到指定位置(类似锚点)

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

话不多说,看代码

wxml

  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

  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:

  1. /* pages/order/car/add_car/car_brand/car_brand.wxss */  

  2. scroll-view {  

  3.   height600px;  

  4.     floatleft;  

  5.   width94%;  

  6. }  

  7.    

  8.   

  9. .wordindex {  

  10.   line-height50rpx;  

  11.   background#f7f7f7;  

  12.   

  13.   font-size14px;  

  14.   color#929292;  

  15.   padding-left28rpx;  

  16. }  

  17.   

  18. .color_view {  

  19.   text-aligncenter;  

  20.   display: inline-flex;  

  21.   flex-direction: column;  

  22. }  

  23.   

  24. .brand_block {  

  25.   margin-top28rpx;  

  26.   margin-left28rpx;  

  27. }  

  28.   

  29. image {  

  30.   width140rpx;  

  31.   height140rpx;  

  32.   margin-right24rpx;  

  33.   margin-bottom24rpx;  

  34.   border-stylesolid;  

  35.   border-width1rpx;  

  36.   border-color#ededed;  

  37. }  

  38.   

  39. .index {  

  40.   floatright;  

  41.   positionfixed;  

  42.   right: 0;  

  43.   margin-top20%;  

  44.   margin-right10rpx;  

  45.   color#e0004a;  

  46.   font-size11px;  

  47. }  

  48.   

  49. .index text {  

  50.   display: flex;  

  51.   line-height18rpx;  

  52. }  


其中有几个点需要注意

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

如下图

微信小程序-scroll-view滚动到指定位置(类似锚点)

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

那么问题来了

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

see it..

  1. var cData = that.data.brandList;  

  2.         cData[0].wordindex = "#";//先修改json值  

  3.         that.setData({ //再set值  

  4.           wordindex: cData  

  5.         })  

就酱~ 大功告成




0
收藏