平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
插件使用方法
在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函数