uni-app 使用 mescroll-nui 做加载刷新功能
//首先 在官网 https://ext.dcloud.net.cn/plugin?id=343 下载 mescroll-nui 这个组件。
//然后解压,有个目录为 mescroll-nui 的文件夹
//在项目中新建一个文件夹名为:components ,这个文件夹专门用来放下载后的组件文件的,把mescroll-nui文件放到这里面即可
<template>
<view class="container">
<!--这里是tab部分 -->
<view class="header_tab">
<view class="tab_detail" @tap="changeCurrentIndex(0)">
<text :class="defaultIndex == 0 ? 'current':''">目录一</text>
</view>
<view class="tab_detail" @tap="changeCurrentIndex(1)">
<text :class="defaultIndex == 1 ? 'current':''">目录二</text>
</view>
<view class="tab_detail" @tap="changeCurrentIndex(2)">
<text :class="defaultIndex == 2 ? 'current':''">目录三</text>
</view>
</view>
<!-- 这里是滚动部分 -->
<mescroll-uni top="100" @down="downFun" @up="upFun" :up="upTips" class="message" >
<view class="message_content" v-for="(item,index) in dataList" :key="index">
<view class="message_content_left">
<image class="img" src="" alt=""></image>
</view>
<view class="message_content_rght">
<view class="username">username</view>
</view>
</view>
</mescroll-uni>
</view>
</template>
//css样式 是用的scss语法
<style lang="scss">
page{
background-color:#f8f8f8;
height:100%;
}
.container{
height:100%;
.header_tab{
display:flex;
background-color:#fff;
padding-right:20rpx;
margin-bottom:10rpx;
z-index:999;
justify-content:space-around;
.tab_detail{
font-size:28rpx;
margin:20rpx 0;
.current{
padding:28rpx 12rpx;
border-bottom:2px solid #00cf89;
color:#00cf89;
}
}
}
.message{
height:92%;
.message_content{
display:flex;
flex-direction:row;
margin:20rpx 20rpx 0;
padding:24rpx 20rpx 24rpx 0;
background-color:#fff;
width:100%;
.message_content_left{
width:120rpx;
.img{
width:100%;
height:120rpx;
}
}
.message_content_rght{
width:calc(100% - 120rpx);
.username{
font-size:26rpx;
}
}
}
}
}
</style>
<script>
//js 部分
//先把 mescrolluni 文件引入到当前页面
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
export default{
components:{
MescrollUni
},
data(){
return{
defaultIndex:0,
isShowNoMore:false,
upTips:{
textNoMore:'我是有底线的',
},
dataList:[{
nickname:'xxxx',
gender:'1',
age:'18',
hobby:'reading',
city:'chengdu'
}]
}
},
methods:{
mescrollInit(mescroll){
console.log(mescroll)
},
downFun(mescroll){
setTimeout(()=>{
mescroll.endErr()
},1000)
},
upFun(mescroll){
setTimeout(()=>{
if(this.dataList.length<10){
for(var i=0;i<5;i++){
var obj = {
nickname:'',
gender:'',
age:'',
city:'chengdu',
hobby:'listening'
};
this.dataList.push(obj);
}
this.isShowNoMore = false;
mescroll.endUpScroll(this.isShowNoMore);
}else{
this.isShowNoMore = true;
mescroll.endUpScroll(this.isShowNoMore);
}
},1000)
},
//点击切换tab
changeCurrentIndex(index){
this.defaultIndex = index;
}
}
}
</script>
效果图如下:
参考链接:https://blog.csdn.net/Xl4277/article/details/99833067
关于mescroll参数详解见官网: http://www.mescroll.com/uni.html#options
如果快乐太难,那祝你平安。