<scroll-view class='goods-scroll-view' scroll-y style="height: {{scrollViewHeight}}px;" bindscrolltolower="scrollToLower" bindscrolltoupper="scrollToUpper">
<view class='goods-list'>
//内容
<view class='isLoading-tip' hidden='{{!isLoading}}'>
<van-loading type="spinner" />
</view>
</view>
<view class='no-goods' wx:if="{{isShowNoGoods}}">
<image mode='aspectFit' style='width' src='../../../../images/no-data-img.png'></image>
</view>
<view class='no-more-goods' wx:if="{{isShowNoMoreGoods}}">
<text>没有更多了</text>
</view>
</scroll-view>
data:{
page:1,//分页
page_size:8,//一页的数据
goods_list:[],//商品列表
scrollViewHeight:400,
loadMore:true,//是否启动滚动加载
isLoading:false,//是否正在加载
isShowNoGoods:false,//是否显示没有数据
isShowNoMoreGoods:false,//是否显示没有更多了
},
loadMoreGoods:function(){
var that = this;
//显示正在加载动画
that.setData({
isLoading: true,
})
MBC.Ajax({
url: api.searchGoods,
is_login: true,
data: {
goods_name: that.data.searchValue,
class_id: that.data.class_id,
page: that.data.page,
page_size: that.data.page_size
},
success: function (res) {
if(res.result.goods_list == 0 && that.data.page == '1'){
//第一页就没有数据
that.setData({
isShowNoGoods:true,//显示没有数据
loadMore: false,//不启用滚动加载
isLoading: false,//结束加载动画
})
}
if (res.result.goods_list.length == 0) {
that.setData({
loadMore: false,//不启用滚动加载
isLoading: false,//结束加载动画
isShowNoMoreGoods: true,//显示没有更多数据
})
} else if (res.result.goods_list.length > 0 && res.result.goods_list.length < that.data.page_size) {
that.data.goods_list.push(...res.result.goods_list);
that.setData({
goods_list: that.data.goods_list,
page: that.data.page + 1,
loadMore: false,
isLoading: false,
isShowNoMoreGoods: true,//显示没有更多数据
})
} else if (res.result.goods_list.length >= that.data.page_size) {
that.data.goods_list.push(...res.result.goods_list);
that.setData({
goods_list: that.data.goods_list,
page: that.data.page + 1,
loadMore: true,
isLoading: false,
})
}
}
})
},
//滚动到底部触发
scrollToLower: function (event){
var that = this;
console.log(event);
if (that.data.loadMore){
that.loadMoreGoods();
}else{
that.setData({
isShowNoMoreGoods: true,//显示没有更多数据
})
console.log("没有更多的数据了");
}
},
.no-goods{
width:150px;
height: 150px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -75px;
margin-top: -75px;
display: flex;
justify-content: center;
}
.no-more-goods{
display:flex;
justify-content:center;
padding:20px 0;
position: relative;
}
.no-goods image{
width: 100%;
height: 100%;
}
.goods-scroll-view{
position: relative;
}
.isLoading-tip{
display:flex;
justify-content:center;
padding:20px 0;
}
"usingComponents": {
"van-loading": "../../components/VantWeapp/lib/loading/index"
},