平台兼容性
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
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函数