微信小程序万能下拉刷新(官方样式)组件 |
您所在的位置：网站首页 › 微信上方小程序怎么拉不下来 › 微信小程序万能下拉刷新(官方样式)组件 |
微信小程序万能下拉刷新(官方样式)组件
|
微信小程序万能下拉刷新组件
前言思路实现步骤定义组件具体实现js代码实现布局实现样式
使用页面json配置页面布局js实现动态宽高度，充满屏幕
存在问题
应用尾巴
前言
微信小程序(后面统称小程序)在page中已经自带下拉刷新功能，只需要在json文件中开启配置就可以便捷使用下拉刷新功能。但是在开发场景中下拉刷新的使用频次是很高的，有时候不止要在page层级实现下拉刷新功能。那么我们想对任意的view都能实现下拉刷新可以实现么？答案是：yes！ 思路通过查阅官方API文档，发现scroll-view在最低版本为2.10.1可以支持下拉刷新功能。那么我们就可以通过封装scroll-view来实现下拉刷新任意view的功能，而且我们要实现的是官方样式，用系统自带的兼容性更好。 既然是提供一个通用组件（Component），所以第一步我们先定义一个组件（Component）。之前写过一篇自定义组件的文章微信小程序自定义组件，不太清楚流程的可以去看下这篇文章。 定义组件 在和pages同级的目录新建component文件夹然后在component文件夹右键【新建目录】pullfresh然后在pullfresh文件夹右键【新建component】pullfresh做完上面三部会自动帮你生成pullfresh组件的四个文件 具体实现首先我们先列举下这个下拉刷新组件需要对外暴露的属性和函数： 控件的高度：height控件的宽度：width控件的背景：background控件刷新超时时间：timeout是否支持上拉加载：enablemore刷新回调函数：onRefresh()刷新重置回调函数：onRestore()刷新中止回调函数：onAbort()刷新结束回调函数：onRefreshEnd()上拉更多回调函数：onLoadmore()接下来就是代码实现了，关键地方我会做好注释 js代码实现 //js文件代码实现 const app = getApp() var that Component({ /** * 组件的属性列表 */ properties: { //刷新控件高度，单位rpx height: { type: Number, value: 0 }, //刷新控件宽度，单位rpx width: { type: Number, value: 0 }, //刷新控件背景颜色 background: { type: String, value: 'white' }, //刷新控件刷新超时时间 timeout: { type: Number, value: 4000 }, //是否开启上拉加载更多，默认不开启 enablemore: { type: Boolean, value: false } }, options: { multipleSlots: true // 在组件定义时的选项中启用slot支持 }, /** * 组件的初始数据 */ data: { triggered: false }, // 以下是旧式的定义方式，可以保持对 { that.endFresh() }, that.properties.timeout) //对外暴露的刷新方法 that.triggerEvent("onRefresh") }, //刷新重置回调 onRestore(e) { //对外暴露的刷新重置方法 that.triggerEvent("onRestore") }, //刷新中断回调 onAbort(e) { //对外暴露的刷新中断方法 that.triggerEvent("onAbort") }, //刷新结束回调 endFresh(){ that.setData({ triggered: false, }) that._freshing = false //对外暴露的刷新结束方法 that.triggerEvent("onRefreshEnd") }, //上拉更多回调 onLoadmore(e){ if (!that.properties.enablemore){ return } //对外暴露的上拉方法 that.triggerEvent("onLoadmore") } } }) 布局实现这里用到的slot节点主要是用来实现占位，可以替换自己的布局，刷新任意view就体现在这里。关于slot不清楚的可以查看我之前的文章微信小程序自定义组件。 |
【本文地址】
今日新闻 |
推荐新闻 |