微信小程序 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 相关文章推荐
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
微信小程序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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js简单抽奖代码
2015/01/16 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Django后台admin的使用详解
2019/07/08 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
霸气队列口号
2014/06/18 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
追讨欠款律师函
2015/05/27 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Redis持久化与主从复制的实践
2021/04/27 Redis