插件使用

• mescroll-uni
• uni-nav-bar 導(dǎo)航欄
• uni-list uni-list-item

安裝插件

引入插件 （文件路徑需要按自己的路徑）
import MescrollUni from ‘@/components/mescroll-uni/mescroll-uni.vue’

注冊(cè)組件
components: {
MescrollUni,
},

mescroll-uni

支持上拉加載，上拉刷新，和分頁(yè)加載數(shù)據(jù)
https://ext.dcloud.net.cn/search?q=mescroll-uni

//html部分 <mescroll-uni :fixed="false" :up="upOption" :down="downOption" @up="upCallback" @down="downCallback"> </mescroll-uni>//基本配置 downOption: { //下拉刷新的配置auto: false //是否在初始化完畢之后自動(dòng)執(zhí)行一次下拉刷新的回調(diào) }, upOption: { //上拉加載數(shù)據(jù)auto:false,page: {num:0, //起始頁(yè)size: 10, //每頁(yè)的條數(shù) } }//觸發(fā)的事件 upCallback(mescroll) {this.getList(mescroll.num,mescroll.size,res =>{if (mescroll.num == 1) {this.allList = [];}// 累加數(shù)據(jù)this.allList = this.allList.concat(res);// 分割數(shù)據(jù)this.splitListData();// 成功 隱藏下拉刷新?tīng)顟B(tài)mescroll.endSuccess();},() => {// 失敗 隱藏下拉刷新?tīng)顟B(tài)mescroll.endErr();}); }, downCallback(mescroll) {// console.log('down');// 重置列表為第一頁(yè)，自動(dòng)執(zhí)行pagenum=1，然后觸發(fā)upCallbackmescroll.resetUpScroll(); },

uni-nav-bar 導(dǎo)航欄

https://ext.dcloud.net.cn/search?q=uni-nav-bar

使用情況比較簡(jiǎn)單，這里就不多做介紹，

uni-list uni-list-item

https://ext.dcloud.net.cn/search?q=uni-list

使用也比較簡(jiǎn)單，建議直接官網(wǎng)查看

<uni-list><uni-list-item title="自定義右側(cè)插槽" note="列表描述信息" link><template slot="header"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></template></uni-list-item><uni-list-item><!-- 自定義 header --><view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view><!-- 自定義 body --><text slot="body" class="slot-box slot-text">自定義插槽</text><!-- 自定義 footer--><template slot="footer"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></template></uni-list-item> </uni-list>

總結(jié)

以上是生活随笔為你收集整理的uni中一些插件的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。