<scroller :lockX="true"
:use-pulldown="true"
:use-pullup="true"
:pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"
:pullup-config="{upContent: '上拉加载更多', downContent: '释放后加载'}"
@on-pullup-loading="loadMoreData"
@on-pulldown-loading="refreshData"
ref="MyMessageScroller">
<div class="list-wrap">
<scroller v-model="scrollerStatus" lock-x height="100%" :bounce="false" :use-pullup="true" :pullup-config="upobj" @on-pullup-loading="onScrollDishPage" :scroll-bottom-offset="100" ref="scrollerDish">
<div>
<div class="list-item" v-for="item in dishList" :key="item">
<div class="img">
<img :src="item.dishImgUrl" alt="">
</div>
<div class="cai-info">
<p class="cai-name">{{item.dishName}}</p>
<p class="sell">月售{{item.dishNum}}</p>
<p class="price">¥<span class="num">{{item.dishPrice}}</span></p>
</div>
<div class="add" @click="addDishToOrder(item)"></div>
</div>
<load-more :show-loading="dishLoading" :tip="dishLoadingTxt"></load-more>
</div>
</scroller>
</div>
getDishList(isRestPage){
let _this = this;
let params={
// dishTypeId:_this.currentDishTypeId,
dishTimeId:_this.currentDishTypeId,
pageSize:10,
pageIndex:_this.dishPageIndex
}
_this.dishLoading = true;
_this.dishLoadingTxt = "正在加载";
getPageDish(params).then(res => {
if(res.status == 200){
_this.dishLoading = false
if(isRestPage){
_this.dishList = res.data.records;
_this.dishPages = res.data.pages;
_this.$nextTick(() => {
_this.$refs.scrollerDish.reset();
})
}else{
_this.dishList.push(...res.data.records);
_this.$nextTick(() => {
_this.$refs.scrollerDish.donePullup();
})
}
if(_this.dishPageIndex >= _this.dishPages ){
_this.dishLoadingTxt = "没有更多了"
}
_this.$nextTick(() => {
_this.$refs.scrollerDish.donePullup();
})
}
})
},
onScrollDishPage() {
let _this = this;
if (this.dishLoading) {
return;
} else {
if (this.dishPageIndex >= this.dishPages) {
//this.dishLoadingTxt = "没有更多了"
return;
}
this.dishPageIndex++;
this.getDishList()
}
},
upobj: {
content: '',
pullUpHeight: 60,
height: 0,
autoRefresh: false,
downContent: '',
upContent: '',
loadingContent: ''
},
content: '请上拉刷新数据',
pullUpHeight: 60,
height: 40, // 显示文字的所占的高度
autoRefresh: false,
downContent: '请上拉刷新数据',
upContent: '请上拉刷新数据',
loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
scrollerStatus: {
pullupStatus: 'default'
}
this.scrollerStatus.pullupStatus = 'disabled' // 禁用下拉
注意:scroller子元素必须是一个div
网友评论