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

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

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

效果图

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. 滚动视图内容要超过视图本身的宽或者高才能看到效果
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页