uni中一些插件的使用

1. 安装插件
2. 引入插件 （文件路径需要按自己的路径）
   import MescrollUni from ‘@/components/mescroll-uni/mescroll-uni.vue’
3. 注册组件
   components: {
   MescrollUni,
   },

mescroll-uni

支持上拉加载，上拉刷新，和分页加载数据
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   //是否在初始化完毕之后自动执行一次下拉刷新的回调
},
upOption: {  //上拉加载数据
	auto:false,
	page: {
		num:0,   //起始页
		size: 10, //每页的条数		 
	}
}

//触发的事件
upCallback(mescroll) {
   this.getList(mescroll.num,mescroll.size,res =>{
   	if (mescroll.num == 1) {
   		this.allList = [];
   	}
   	// 累加数据
   	this.allList = this.allList.concat(res);
	// 分割数据
	this.splitListData();
   	// 成功 隐藏下拉刷新状态
   	mescroll.endSuccess();
   },() => {
   	// 失败 隐藏下拉刷新状态
   	mescroll.endErr();
   });
},
downCallback(mescroll) {
  	// console.log('down');
	// 重置列表为第一页，自动执行pagenum=1，然后触发upCallback
	mescroll.resetUpScroll();
},

uni-nav-bar 导航栏

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

使用情况比较简单，这里就不多做介绍，

uni-list uni-list-item

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

使用也比较简单，建议直接官网查看

<uni-list>
    <uni-list-item title="自定义右侧插槽" 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>