微信小程序 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 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue全局使用axios的操作
Sep 08 Javascript
JavaScript中如何调用Java方法
Sep 16 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
PHP cron中的批处理
2008/09/16 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
值传递还是引用传递
2015/02/08 面试题
尽职尽责村干部自我鉴定
2014/01/23 职场文书
协议书的格式
2014/04/23 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python
无线电知识基础入门篇
2022/02/18 无线电