咨询热线:15338715291 联系人:夏云松 地址:中国吉林前郭尔罗斯蒙古族自治县松原市经济技术开发区
微信小程序-自定义下拉刷新
来源:ebet白金会 发布时间:2019-11-18 点击量:480
最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多
微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色
最终实现后的效果(这里提示有个不同点就是,自定义了导航条,并且下拉的时候,自定义导航条必须固定)
小程序实现下拉加载2种方式:
1. 简单粗暴,直接开启enablePullDownRefresh,开启全局下拉刷新
2.利用scroll-view组件
简单分析下2种方式的利与弊
enablePullDownRefresh方式
优点:简单粗暴,兼容性没问题缺点1: 只能配置背景颜色,没有图片与状态提示的变化。缺点2: 最重要的一点,如果自定义了导航条即使采用fixed定位,整个导航条还是会随页面一起往下拉动,整个布局效果非常变扭。这才是我放弃的最终原因(参考最终效果图,自定义了导航条)
scroll-view方式
优点:可以自定义(参考最终效果图)缺点:安卓与微信存在不同的兼容问题,所以针对2套平台要有2套处理方式,比较麻烦
实现原理:
enablePullDownRefresh的方式没啥好说的,按照文档的来。
scroll-view方式的就比较麻烦了,首先说下引起问题的2个因素点
自定义了导航条IOS上有橡皮筋效果,安卓没有
自定义了导航条,那么页面的布局一定要减去这个导航条的占位,所以scroll-view包裹的区域,一定会有一个定位处理,top的定位距离就是导航条的高度。
IOS上scroll-view的实现原理
IOS默认存在橡皮筋效果那么意味着就会有反弹反馈,元素滚动一定会有scrollTop的变化,那么利用scrollTop的变化就能很好的实现
为了滚动的性能最大优化,所以默认都是用系统自带滚动,并不会做控制页面内容本身的滑动
布局的时候,原来的滚动内容部分用scroll-view包装,并且在之前加上下拉刷新的展示区域view,利用translateY把scroll-view的top设置为负值(展示区域的高度),这样就把下拉的显示区域拼接到了scroll-view之前,并且还看不到
在下拉scroll-view的时候,由于ios支持橡皮筋效果,所以scrollTop为负值的时候,展示区域自动会随着scrollTop的递减而出现。
状态的与图片的变化,可以通过监听scroll事件,通过scrollTop值的变化,做出相应的改变。当然这里还会有scrolltolower与touchend事件,要知道什么时候松手后触发刷新,并且刷新之后还要设置还原
安卓上scroll-view的实现原理
安卓就这样,没有反弹效果,所以scrollTop也不会有负数。这时候只能靠手动移动页面模拟反弹了。
安卓上需要对scroll-view绑定 start,move,end,scroll,upper事件,要监听用户的页面操作,当然如果是正常滚动内容的时候,不影响,也不做任何处理,一旦用户是下拉刷新操作,才介入
页面的布局也是由下拉刷新的展示区域+包裹内容的scroll-view区域组成,不同于ios布局的就是,下拉刷新区域默认高度是0,scroll-view也不需要设置translateY负值了,需要下拉的时候调整展示区域的高度
通过lower事件判断是边界,如果下拉越界,那么通过move控制scroll-view区域整体的往下滑动同时控制下拉刷新区域的高度变化,这样就实现了下拉的效果
最后在end中,判断下移动的距离跟刷新的高度对比,从而更改下拉的状态与图片,并且触发刷新请求,最后可以动画复位
封装
一般这种功能直接做成组件就好了,ios与安卓可以独立2个组件,然后注册到一个中介的组件中,判断调用哪个,这样比较好维护。
组件内部可以分成3部分
view 下拉刷新区域slot 内容的slot区域view 上拉加载更多区域
不过注意一点,slot一定要加高度,加高度。因为ios默认是反弹,滚动的,如果没有内容,或者内容高度不足,没撑开全部,那么就会触发默认滚动,页面的导航条会上下移动
<view style="min-height:100%;"> <slot></slot></view>
结尾:
由于自定义了导航条,引起了一堆的问题出来,说不上好与坏,反正遇到问题总是要想办法解决的。
这里简单的记录下,给初入小程序的当个借鉴吧。可能我也有处理不对的,或者有更好的方法,可以给下建议。
代码部分如果有需要,等有空了,我就分离出来发一份咯。
相关产品
-
随后不少网友都感慨称“经纪人真是近水楼台”,对此,李艾转发网友微博并解释称未婚夫已非自己经纪人,“说明下哈,他现在不是我经纪人了。当然,他有更重要的身份”。
-
保险业界认为,目前的车险保费依据新车购置价而定,相同售价车辆的保费相同。由于不同汽车的零整比不同,这一定价方式对险企以及车主都有失公平。
-
1日晚,拉斯维加斯曼德勒海湾酒店附近发生美国历史上死伤人数最多的枪击案,造成至少59人丧生、527人受伤。由于一些伤者情况严重,死亡数字可能进一步上升。
-
三星北美首席执行官Gregory Lee表示:“三星一直不断地在对产品进行升级改进。此次获奖是CES主办方和该行业对我们的一种认可,我们对此深表荣幸。我们对即将到来的2017年CES展会上充满期待,届时公司将对外展出一些最新产品。”
-
目前大多数跨国汽车企业都已经在中国设立合资公司,因此,降低汽车进口关税的影响将更多地体现在以纯进口为主的豪华车市场。
-
欧蓝德是三菱旗下一款热门紧凑型SUV,新款尺寸变小,采用全新大嘴式前脸,整车外观更加年轻时尚。 欧蓝德既有豪华轿车般的驾驶感受、舒适性,又有运动型多功能SUV的粗犷外观和良好的操控性。它配有专门开发的带学习记忆模式的6速手自一体变速箱,大幅度提升了车辆的安全性和运动性。
-
去的时候正是晌午,各家各户升起炊烟,山间一个少年,摘下一片芭蕉叶便蹿回村子里,大概是午餐所用的桌布,我再跑上去问他,他也红着脸不做声。许嘉璐先生说这是寻找童年的旅程,我在这里看得最多。
-
为此,甘雯在发布会上透露,为防止滥用诉权、虚假诉讼等扰乱正常立案秩序的行为,最高法正对惩治滥诉行为进行调研,拟于今年出台规范性文件。
热点资讯
- 白云峰:中国的基础教育模式还停留在工业文明时代|北京大学光华新浪财经2019-11-06
- ColorOS5.2.1正式版来了!OPPOR11s和R11sPlus已开启升级2019-11-07
- 李咏患癌去世,“癌症”可以预防和治愈吗?2019-11-10
- 承德围场电商平台助力农户脱贫2019-11-07
- 360金融上市美国投资者偏好消费金融B端服务|股票价格新浪金融与经济2019-11-12
- 安卓新漏洞RAMpage曝光:大量设备将受影响2019-11-08
- 869元,微软XboxOne精英版无线手柄再降2019-06-17
- 얕보다가…‘망신축구’2019-11-09