上次使用 scroll-view 实现的加载刷新实属体验极差（哈哈）；
这次get到 mescroll-uni 不是uniapp 项目也可以用个人感觉体验还是非常棒的
官网讲解非常详细：http://www.mescroll.com/uni.html#options
上拉：
下拉：
还是先引入组件：
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {
components:{
MescrollUni
},
}
uni-APP 的 插件市场上直接下载引入 https://ext.dcloud.net.cn/plugin?id=343
<mescroll-uni top="100" @down="downCallback" @up="upCallback" :up="upOption" class="message">
遍历的数据
</mescroll-uni>
参数官网有详解 ： http://www.mescroll.com/uni.html#options
个人代码参考：
<template>
<view class="content">
<view class="header_tab">
<view class="Tab_label" @tap="allorders">
<text :class="text == '全部' ? 'text' : ''">全部</text>
</view>
<view class="Tab_label" @tap="waitorders">
<text :class="text == '代付款' ? 'text' : ''">代付款</text>
</view>
<view class="Tab_label" @tap="alreadyorders">
<text :class="text == '已完成' ? 'text' : ''">已完成</text>
</view>
<view class="Tab_label" @tap="refundorders">
<text :class="text == '售后' ? 'text' : ''">退款/售后</text>
</view>
</view>
<mescroll-uni top="100" @down="downCallback" @up="upCallback" :up="upOption" class="message">
<view class="message_text" v-for="(item , index) in list" :key="index">
<image class="img" :src="item.img" mode=""></image>
<view class="text_right">
<view class="shop_name">
<text>百哩香百脑汇（群光店）</text>
<text class="iconfont iconyoujiantou" ></text>
<text style="float: right;" :class="item.payment == '代付款' ? 'payment' : '' ">{
{item.payment}}</text>
</view>
<view class="text_time">
<text>{
{item.time}}</text>
</view>
<view class="commodity">
<text>{
{item.title}} 等{
{item.number}}件商品</text>
<text>￥{
{item.price}}</text>
</view>
<view class="details">
<text>删除订单</text>
<text>再来一单</text>
<text @tap="" class="blue" :class="item.payment != '代付款' && item.payment != '已接单' && item.payment != '已完成' ? 'none' : ''" >{
{item.payment == '已完成' ? '评价' : '取消订单'}}</text>
</view>
</view>
</view>
</mescroll-uni>
</view>
</template>
<script>
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {
components:{
MescrollUni
},
data() {
return {
loading:'',
text:'全部',
isShowNoMore:false,
upOption:{
textNoMore:'我是有底线的 >_<'
},
list:[
{
payment:'代付款',
number:2,
title:'孜然羊排',
price:16,
time:'2019-06-16 12.10',
img:'../../../static/img/timg.jpg'
},
{
payment:'已接单',
number:2,
title:'孜然羊排',
price:15,
time:'2019-06-16 15.10',
img:'../../../static/img/timg.jpg'
},
{
payment:'已付款',
number:3,
title:'土豆烧鸡',
price:15,
time:'2019-06-16 12.05',
img:'../../../static/img/timg.jpg'
},
{
payment:'已退款',
number:1,
title:'孜然羊排',
price:19,
time:'2019-06-16 12.18',
img:'../../../static/img/timg.jpg'
},
{
payment:'已取消',
number:2,
title:'玉米烧排骨',
price:17,
time:'2019-06-16 12.10',
img:'../../../static/img/timg.jpg'
},
{
payment:'已完成',
number:2,
title:'玉米烧排骨',
price:17,
time:'2019-06-16 12.10',
img:'../../../static/img/timg.jpg'
}
]
};
},
onLoad(option) {
},
onPageScroll(e){
},
methods: {
//联网加载列表数据
//在您的实际项目中,请参考官方写法:
//----- - http://www.mescroll.com/uni.html#tagUpCallback ----------------------
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
console.log(mescroll)
// this.mescroll = mescroll;
},
// 下拉回调
downCallback(mescroll){
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
// loadSwiper();
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
// mescroll.resetUpScroll()
setTimeout(()=>{
console.log(666);
// 隐藏下拉加载状态
mescroll.endErr()
},1000)
},
// 上拉回调
upCallback(mescroll){
setTimeout(()=>{
console.log(6655,"下拉");
// 结束上拉加载状态 isShowNoMore=true, 显示无更多数据; isShowNoMore=false, 隐藏上拉加载; isShowNoMore=null, 保持当前状态
if(this.list.length <= 20){
for(var i = 0; i < 10; i++){
var obj = {
payment:'已付款',
number:2,
title:'孜然羊排',
price:16,
time:'2019-06-16 12.10',
img:'../../../static/img/timg.jpg'
};
this.list.push(obj);
}
console.log(this.list);
this.isShowNoMore = false;
mescroll.endUpScroll(this.isShowNoMore);
}else {
this.isShowNoMore = true;
mescroll.endUpScroll(this.isShowNoMore);
}
},1000)
},
onReachBottom(){
},
allorders(){
this.text = '全部'
},
waitorders(){
this.text = '代付款'
},
alreadyorders(){
this.text = '已完成'
},
refundorders(){
this.text = '售后'
}
},
}
</script>
<style lang="scss">
page{
background-color: #f8f8f8;
height: 100%;
}
.content {
height: 100%;
.header_tab {
display: flex;
background-color: #fff;
padding-right: 20upx;
margin-bottom: 10upx;
z-index: 999;
.Tab_label {
width: 25%;
text-align: center;
font-size: 28upx;
margin: 28upx 0;
.text {
padding: 28upx 12upx;
border-bottom: 2px solid #FFD200;
color: #FFD200;
}
}
}
.message {
height: 92%;
.message_text {
display: flex;
margin: 20upx 20upx 0;
padding: 24upx 20upx 24upx 0 ;
background-color: #fff;
.img {
width: 140upx;
height: 140upx;
margin: 0 20upx;
}
.text_right {
font-size: 28upx;
width: 78%;
.shop_name {
.payment {
float: right;
font-size: 24upx;
color: #E51C23;
}
.iconyoujiantou {
color: #4c4c4c;
font-weight: 700;
}
}
.text_time {
font-size: 24upx;
color:#4c4c4c;
}
.commodity {
color: #101010;
margin: 10upx 0 34upx;
text:last-child {
float: right;
font-weight: 700;
}
}
.details {
color: #101010;
display: flex;
justify-content: flex-end;
text {
margin:10upx 10upx;
padding: 0 10upx 6upx;
border: 1px solid rgba(187 , 187 , 187 , 1);
border-radius: 5px;
}
.blue {
color: #5bb1ff;
border: 1px solid #5bb1ff;
}
.none {
display: none;
}
}
}
}
.loading {
font-size: 24upx;
color:#979797;
display: flex;
justify-content: center;
padding: 40upx 0;
}
}
}
</style>