微信小程序 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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
详解vue axios中文文档
Sep 12 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
Seajs源码详解分析
Apr 02 Javascript
基于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
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
React 源码中的依赖注入方法
2018/11/07 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python自省及反射原理实例详解
2020/07/06 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
实习评语
2013/12/16 职场文书
《春晓》教学反思
2014/04/20 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers