微信小程序 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 实例一(first)
Mar 16 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
js实现分割上传大文件
Mar 09 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
基于Vue中的父子传值问题解决
Jul 27 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
图片按比例缩放函数
2006/06/26 Javascript
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python保存网页图片到本地的方法
2018/07/24 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
自我反省检讨书
2014/01/23 职场文书
服装采购员岗位职责
2014/03/15 职场文书
C++程序员求职信范文
2014/04/14 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android