最近开发了一款商城小程序，打算整理一下商城小程序遇到的难点和解决方法。
好多网页页面元素非常多，信息量也非常大，用户在使用过程中可以通过页面导航实现快速的切换，而无需用户来回滚动鼠标，极大提高了用户的体验性，本篇主要介绍在商城列表中如何使用锚点，话不多说上代码。
效果图
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
})
},
注意点
- id不能为数字开头或者包含中文
- 滚动视图的宽、高必须要设置
- 滚动视图内容要超过视图本身的宽或者高才能看到效果
