在微信小程序中, 使用 scroll-view 实现长页面的标记跳转, 官方文档中没有例子演示, 锚点标记主要是使用 < scroll-view> 的 scroll-into-view 属性.
实现锚点跳转主要以下几点:
1, 最外层容器使用 scroll-view
2, 赋值 scroll-into-view, 如:<scroll-view scroll-into-view="{{toView}}">
3, 设置 scroll-view 滚动方向 scroll-y="true"
4, 跳转到的位置使用 id (定位), 如:<view id="mark1">
- <view class="list">
- <view bindtap='jumpTo' data-opt="list0">list0</view>
- <view bindtap='jumpTo' data-opt="list11">list11</view>
- <view bindtap='jumpTo' data-opt="list29">list29</view>
- </view>
- <scroll-view scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
- <view wx:for="{{list}}" id="{{item}}" class="test">
- {{item}}
- </view>
- </scroll-view>
- data: {
- list: ["list0", "list1", "list2"],
- toView: ''
- },
- jumpTo: function (e) {
- // 获取标签元素上自定义的 data-opt 属性的值
- let target = e.currentTarget.dataset.opt;
- this.setData({
- toView: target
- })
- },
来源: http://www.bubuko.com/infodetail-2994198.html