微信小程序 scroll-view实现锚点滑动的示例


Posted in Javascript onDecember 06, 2017

前言

最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下:

微信小程序 scroll-view实现锚点滑动的示例

因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来。

一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去。结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏幕滑动而变化,可能还会引起页面抖动,最后还是选择scroll-view(可滚动视图区域)组件来实现锚点效果。

具体实现

具体API就不赘述了,可以去看官方文档,这里讲几个需要注意的地方,下面是一个示意的scroll-view组件代码,上面的几个属性是必须的:

<scroll-view scroll-y style="height: 200px;" bindscroll="scroll" scroll-into-view="{{toView}}" >

scroll-into-view:这个绑定了一个属性,它的值应该是页面元素的id,设置它的值就可以跳转到ID对应的元素那里了。

scroll-y:添加这个属性标明是竖向滑动的,对应的scroll-x则表示横向滑动,竖向滑动时scroll-view必须设置一个固定的height

bindscroll:监听滑动,传给他一个事件,滑动时执行该事件

文档上给的属性特别多,暂时只需要上述几个就可实现我们想要的效果。实现原理也很简单,内容部分,每个英文简写的view设置一个id,然后在导航list那里点击时,就把scroll-into-view的值设置成点击的那个id即可实现跳转。

再说一下scroll-view的高度问题,这个一定要做适配的固定高度,不然在不同屏幕大小的手机上的显示效果有差异。

几点优化

到这里功能基本都实现了,但后面还发现一些问题:如果要隐藏scroll-view的滚动条,需要设置css样式:::-webkit-scrollbar

::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}

还有就是点了一个锚点实现了跳转,这个时候你滚动页面再点之前点的锚点,页面就不会再跳转了,这个时候就需要监听滚动事件,滚动时将scroll-into-view属性的值清空。或者在每次锚点跳转后,再由一个异步操作将scroll-into-view属性的值清空。

2017/12/05补充:

scroll-view默认是无滑动动画的,需要滚动的动画效果需要在组件上设置:scroll-with-animation='true'
关于固定高度height的设置问题,一开始我以为这个高度和滚动元素的数目/高度有关,这个时候处理动态变化的列表就很麻烦。后面在网上看到的一个方法就是使用wx.getSystemInfo方法得到windowHeight,把这个设置为scroll-view的高度(单位为px)即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
基于Vue制作组织架构树组件
Dec 06 #Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 #Javascript
如何重置vue打印变量的显示方式
Dec 06 #Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 #Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 #Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 #Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 #Javascript
You might like
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
js代码实现轮播图
2020/05/04 Javascript
python 图片验证码代码
2008/12/07 Python
python3.5仿微软计算器程序
2020/03/30 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python解析含有重复key的json方法
2019/01/22 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
JAVA代码查错题
2014/10/10 面试题
J2EE相关知识面试题
2013/08/26 面试题
企业项目策划书
2014/01/11 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
家长评语和期望
2014/02/10 职场文书
干部选拔任用方案
2014/05/26 职场文书
影子教师研修方案
2014/06/14 职场文书
遗愿清单观后感
2015/06/09 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS