微信小程序滚动锚点定位实现

最近开发了一款商城小程序，打算整理一下商城小程序遇到的难点和解决方法。

好多网页页面元素非常多，信息量也非常大，用户在使用过程中可以通过页面导航实现快速的切换，而无需用户来回滚动鼠标，极大提高了用户的体验性，本篇主要介绍在商城列表中如何使用锚点，话不多说上代码。

效果图

image

list.wxml

这是一个简单的滚动视图，锚点的关键属性就在于scroll-into-view="{{id}}"，通过这个id可以定位到滚动视图中id名相同的view。

==注意: id不能为数字开头或者包含中文==

<scroll-view class='list-left' scroll-into-view="{{id}}" scroll-y='true' scroll-with-animation='true'>
    <view wx:for="{{list}}" wx:key="">
         <view id="{{item.id}}">
            {{item.name}}
         </view>
    </view>
</scroll-view>

list.css

滚动视图必须设置宽和高，不然可能滚动的是整个页面而不是滚动视图

.list-left{
  width: 20%;
  height: 600rpx;
  font-size:28rpx;
  background: rgb(248, 248, 248);
  color:#777676;
  text-align: center;
}

list.js

通过改变id的值就可以进行锚点定位

  switchTab2: function (e) {
    // console.log(e.currentTarget.dataset.id)
    this.setData({
      curIndex1: e.currentTarget.dataset.index,
      tag:true,
      id1: e.currentTarget.dataset.id
    })
  },

注意点

1. id不能为数字开头或者包含中文
2. 滚动视图的宽、高必须要设置
3. 滚动视图内容要超过视图本身的宽或者高才能看到效果