微信小程序 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 相关文章推荐
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php使用curl访问https示例分享
2014/01/17 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python实现的各种排序算法代码
2013/03/04 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
python内存管理分析
2015/04/08 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python中类的初始化特殊方法
2017/12/01 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
技校毕业生自荐信范文
2014/03/07 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
体育教师个人总结
2015/02/09 职场文书
机关工会工作总结2015
2015/05/26 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python