mescroll-uni-example

mescroll-uni

mescroll -- 精致的下拉刷新和上拉加载js框架

官网

官方文档

注意事项 :

1. 请一定要记住一个经常经常会用到的方法: this.mescroll.resetUpScroll() 比如你想在onShow中刷新一下列表, 比如点击tab切换时重新加载列表, 比如搜索条件变化或状态更新时重置列表数据 那么你只需调用 this.mescroll.resetUpScroll() 方法即可 (内部会自动page.num=1,再主动触发up.callback)

2. 当详情页返回到列表页,想在列表页的onShow刷新数据时, 可以通过配置down和up的auto为false, 然后在onShow中延时调用this.downCallback实现; 还有一个最简单的方式,完全不用配置auto为false, 只需在onShow加一个变量控制即可 (推荐):

   // 详情返回列表,刷新本列表页的数据
   	onShow() {
   		// this.canReset && this.downCallback() // 或 this.canReset&&this.mescroll.resetUpScroll() // 重置列表数据为第一页  
   		// this.canReset && this.mescroll.scrollTo(0,0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
   		this.canReset && this.xxxx() // 自行实现的刷新指定一条数据  
   		this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
   		
   		// 注意: 子组件没有 onShow 的生命周期, 所以
   		// 对于 mescroll-more.vue 和 mescroll-swiper.vue 的返回刷新, 需更新 1.3.3 版本, 且参考对应示例的onShow写法
   	}
   

3. mescroll-body是原生界面的滚动,依赖于onPageScroll和onReachBottom的页面生命周期, 所以mescroll-body尽量不要写在页面的子组件里, 因为子组件无页面的这些生命周期; 如果非要写在子组件中,则需在页面给子组件传入onPageScroll,onReachBottom,否则无法正常滑动列表和触发上拉加载; 强烈推荐参考 mescroll-comp.vue 或 mescroll-more.vue 的案例, 通过mixins传入最简单. 进入插件市场下载案例 > (或用 mescroll-uni , 无此限制, 无此问题)

4. 一个.vue文件只能存在一个mescroll组件, 如果要多mescroll组件, 需分别封装到子组件中 如: tab切换, 页面存在多个mescroll组件, 那么请严格参考 mescroll-more.vue 或 mescroll-swiper.vue 示例的写法 把每个mescroll组件分别封装在子组件中 ( 比如封装为 mescroll-more-item.vue )

5. down和up的配置项不是响应式的, 如果要动态修改配置, 可通过 this.mescroll.optDown 和 this.mescroll.optUp 动态修改 比如,可以动态设置 this.mescroll.optDown.isLock = false/true 来实现动态开关下拉刷新 比如,可以动态设置 this.mescroll.optUp.empty.icon = "xxx.png" 来动态设置空布局的图标

6. mescroll支持npm安装: npm install --save mescroll-uni 引入mescroll-body组件: import MescrollBody from "mescroll-uni/mescroll-body.vue"; 引入mescroll-uni组件: import MescrollUni from "mescroll-uni/mescroll-uni.vue"; 但不推荐npm安装, 因为设置mescroll为全局组件, 编译到APP可能会失效 这是HBuilderX编辑器的问题, 详见: https://ask.dcloud.net.cn/question/73950 也可能会使js中的条件编译失效, 详见: https://github.com/mescroll/mescroll/issues/351

7. Android小程序下拉时image和swiper脱离文档流的问题, 已在1.3.1版本修复 APP端下拉时video脱离文档流的问题, 已在1.3.3版本的 mescroll-options.vue 提供解决方案, 请下载查看

8. 其他: 点此查看常见问题 >

• 绝大部分情况应优先考虑使用 mescroll-body 因为支持原生组件,且性能好 只有当需要局部区域滚动 (如嵌在弹窗,浮层,swiper中), 才考虑 mescroll-uni