微信小程序 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陷阱清单
May 31 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 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
php部分常见问题总结
2008/03/27 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
二招解决php乱码问题
2012/03/25 PHP
php导出excel格式数据问题
2014/03/11 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
pytorch forward两个参数实例
2020/01/17 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
django form和field具体方法和属性说明
2020/07/09 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
c++工程师面试问题
2013/08/04 面试题
历史学专业求职信
2014/06/19 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers