微信小程序 scroll-view 实现锚点跳转功能
在微信小程序中，使用 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
})
},
总结
以上所述是小编给大家介绍的微信小程序 scroll-view 实现锚点跳转功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
-
本文向大家介绍微信小程序scroll-view锚点链接滚动跳转功能，包括了微信小程序scroll-view锚点链接滚动跳转功能的使用技巧和注意事项，需要的朋友参考一下 html js css 总结 以上所述是小编给大家介绍的微信小程序scroll-view锚点链接滚动跳转功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！ 如
-
本文向大家介绍微信小程序 scroll-view实现锚点滑动的示例，包括了微信小程序 scroll-view实现锚点滑动的示例的使用技巧和注意事项，需要的朋友参考一下 前言 最近开始做小程序，通读一遍文档再上手并不算难，但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转，一个城市列表的效果示意图如下： 因为在微信小程序的环境中不能想在浏览器里设置标签，或者操作dom滚动，传统做法就行不
-
本文向大家介绍微信小程序 scroll-view 水平滚动实现过程解析，包括了微信小程序 scroll-view 水平滚动实现过程解析的使用技巧和注意事项，需要的朋友参考一下 1. scroll-view水平滚动使用 1. wxml 2. wxss 2. scroll-view 隐藏滚动条 3. 效果如下： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍微信小程序实现拖拽功能，包括了微信小程序实现拖拽功能的使用技巧和注意事项，需要的朋友参考一下 总结 以上所述是小编给大家介绍的微信小程序实现拖拽功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
-
本文向大家介绍微信小程序实现签字功能，包括了微信小程序实现签字功能的使用技巧和注意事项，需要的朋友参考一下 效果展示 准备工作 1.canvas的使用 主要用到了 bindtouchstart ， bindtouchmove 两个属性，捕捉手指移动的同时，将移动前的坐标和移动后的坐标用canvas的画图api绘制出来 2.wx.createCanvasContext 这个api用于创建并获取指
-
本文向大家介绍微信小程序实现留言功能，包括了微信小程序实现留言功能的使用技巧和注意事项，需要的朋友参考一下 需求：留言可以点赞，点过赞之后图标变化，没人只能点赞一次，留言可以在留言 index.wxml 主要的wxss代码（用于点赞的展示，实现小手、空心小手） js 从后台传过来的数据 留言里面的留言 js 点击我要留言 留言点赞 点赞返回的为点赞人的id 其中所得View初始化全部为false