微信小程序 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 scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
React组件的三种写法总结
Jan 12 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 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获取远程图片并保存到本地的方法
2015/05/12 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
运动会邀请函范文
2014/02/06 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
微观世界观后感
2015/06/10 职场文书
在职证明范本
2015/06/15 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
MySQL查询日期时间
2022/05/15 MySQL