wxml
<view class="movieContent">
<!-- 精选 -->
<view class="doorContent">
<block wx:for="{{commodityData}}" wx:key="idx">
<view class="commodityItems">
<view class="commodityImgBox">
<image class="commodityImg" src="{{item.goodsThumbnailUrl}}"></image>
</view>
<view class="commodityTitle">{{item.goodsName}}</view>
<view class="discounts">
<text>减</text><text>{{item.couponDiscount/100}}元券</text>
</view>
<view class="salesVolume">
<text>券后</text><text>¥{{item.afterDiscount}}</text><text>已售{{item.salesTip}}+件</text>
</view>
</view>
</block>
<view class="nomore-tip" style="margin-top:-16rpx;" wx:if="{{noMoretip&&commodityData.length>0}}">没有更多数据啦~</view>
</view>
</view>
wxss
/*商品信息*/
.doorContent{
width: 95%;
margin: 16rpx auto;
overflow: hidden;
}
.commodityItems{
float: left;
height: 480rpx;
width: 49%;
background: #fff;
margin-bottom: 20rpx;
border-radius: 10rpx;
padding: 10rpx;
box-sizing: border-box;
}
.commodityItems:nth-child(2n){
float: right;
}
.commodityImgBox{
width: 100%;
height: 300rpx;
overflow:hidden;
border-radius: 10rpx;
}
.commodityImg{
width: 100%;
height: 100%;
margin:0;
padding:0;
object-fit: cover;
}
.commodityTitle{
color: #161617;
font-size: 30rpx;
width: 100%;
line-height: 35rpx;
height: 35rpx;
overflow: hidden;
margin: 10rpx 0;
}
.discounts>text:nth-of-type(1){
display: inline-block;
background: #e02e24;
color: #fff;
font-size: 28rpx;
padding: 0 6rpx;
box-sizing: border-box;
border-radius: 10rpx;
}
.discounts>text:nth-of-type(2){
display: inline-block;
background: #fcefed;
color: #e03128;
font-size: 28rpx;
padding: 0 6rpx;
box-sizing: border-box;
border-radius: 5rpx;
}
.salesVolume{
margin-top: 10rpx;
}
.salesVolume>text:nth-of-type(1){
color: #e1342a;
font-size: 28rpx;
}
.salesVolume>text:nth-of-type(2){
font-size: 32rpx;
color: #e1342a;
}
.salesVolume>text:nth-of-type(3){
color: #bbbbbb;
font-size: 22rpx;
}
.nomore-tip{
color: #bbbbbb;
text-align: center;
width: 100%;
}
js
const app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
/*所有商品数据*/
commodityData:[],
page:1, //商品页码,
pageSize:20,//商品个数
noMoretip: false, //false为有更多数据,true为数据加载完毕
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getGoodList()
},
/*商品列表*/
getGoodList(){
wx.showLoading({//不会关闭,在下边请求完成后执行关闭操作
title: '加载中',
})
/*获得商品数据 */
wx.request({
url:app.globalData.baseUrl+'goodsSearch',
method:"get",
data:{
page:this.data.page,
pageSize:this.data.pageSize
},
success:res=>{
let temp=res.data.goodsSearchResponse.goodsList//返回的数据(这里是我需要的数据)
var allArr=[];
var initArr=this.data.commodityData?this.data.commodityData:[]//获取已加载的数据
console.log("已加载的数据",initArr)
var newArr=temp//获取新加载的数据
console.log("新加载的数据",newArr)
var lastPageLength=newArr.length//新加载数据的长度
console.log("新加载的数据长度",lastPageLength)
if(this.data.page<=0){
allArr=temp
}else{
allArr=initArr.concat(newArr)//如果不是第一页,连接已加载与新加载商品
}
if(lastPageLength<10){//如果新加载的一页课程数量小于10,则没有下一页
this.setData({
noMoretip:true
})
}
this.setData({
commodityData:allArr
})
},
complete: function () {
wx.hideLoading();//关闭加载中提示层
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("刷新了")
var page=this.data.page//获取现在页码
if(!this.data.noMoretip){
page++
this.setData({ //页码加一,调用函数,获取下一页内容
page:page
})
this.getGoodList();
}
},
/*
*下拉刷新,要将商品列表,页码都改为初始值,否则会出现刷新之后商品的错乱
*/
onPullDownRefresh: function () {
this.setData({
page: 0,
noMoretip: false, //无更多
commodityData: [], //商品列表
})
this.getGoodList();
},
})