微信小程序 scroll-view 实现锚点跳转功能


Posted in Javascript onDecember 12, 2019

在微信小程序中,使用 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 实现锚点跳转功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
vue router 源码概览案例分析
Oct 09 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 #Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 #Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 #Javascript
微信小程序背景音乐开发详解
Dec 12 #Javascript
vue实现商城秒杀倒计时功能
Dec 12 #Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 #Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 #Javascript
You might like
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
浅谈Python中的bs4基础
2018/10/21 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python