平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | - | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
插件使用方法
在main.js文件中加入
import LoadMoreAllLoad from './components/loadMore/loadMore.vue' Vue.component('LoadMore', LoadMoreAllLoad)
是loadMore成为全局的组件
使用方法:
在需要的页面
<LoadMore :all-loaded="allLoaded" @click.native="loadBottom">
template中加入以上语句
并在data中定义allLoaded是false
methods中调取数据的方法中进行相应的判断:如
let newResult = res.results; if (newResult.length == 0 || (params['size'] && newResult.length < params['size']) || (!params['size'] && newResult.length < 10)) { that.allLoaded = true; } if (params.page!=1){ newResult = that.healthList.concat(newResult); } that.healthList = newResult;
并将其赋值给需要赋值的对象
关键的方法是JavaScript的concat方法。
加入触发的方法: loadBottom: function() { if (!this.allLoaded) { this.params.page += 1; this.loadData(); } }
主要的关键点还在于如何触发 concat函数