wxml代码
<scroll-view style="height:{{scrollHeight}}px;" scroll-y="true" bindscrolltolower="bindDownLoad" lower-threshold="100">
<view wx:if="{{notimg}}" class='notdata'>
<image class='notimf' src='/images/notdata.png'></image>
<view class='nottext'>没有任何商品信息</view>
</view>
<view wx:for="{{productInfo}}" class='productcontent' data-pid='{{item.product_id}}' bindtap='navhref'>
<image class='productimg' src='{{item.product_pic}}'></image>
<view class='productname'>{{item.product_name}}</view>
<view class='productprice'>
<view class='productmoney'>¥<text style='font-size:17px'>{{item.shop_price}}</text></view>
<view class='addprice'>赚¥<text style='font-size:17px'>36.5</text></view>
</view>
<!-- <view class='closetime'>12月21日 18:00:00 结束</view> -->
<!-- 进度条 -->
<view class='con_bai'>
<progress class='strip' percent="80" color="pink" />
<text>已抢83%</text>
</view>
</view>
<view wx:if="{{loadgif}}" class="body-view">
<loading hidden="{{hidden}}" >
加载中...
</loading>
</view>
</scroll-view>
wxss代码
.productcontent{
height: 260rpx;
width: 97%;
padding-left: 3%;
padding-top: 20rpx;
border-bottom: 2px solid pink;
}
.productimg{
width: 35%;
height: 70%;
float: left;
}
.productname{
width: 62%;
height: 35%;
padding-left: 3%;
display: inline-block;
font-size: 15px;
color: #333;
}
.productprice{
width: 62%;
height: 35%;
padding-left: 3%;
display: inline-block;
}
.productprice{
height: 30%;
line-height: 86rpx;
padding-top: 8rpx;
font-size: 11px;
font-weight: 600;
}
.addprice{
width: 47.5%;
height: 100%;
display: inline-block;
color: orange;
}
.productmoney{
width: 30%;
height: 100%;
display: inline-block;
}
.closetime{
width: 62%;
height: 15%;
display: inline-block;
font-size: 11px;
color: #999999;
padding-left: 3%;
}
.con_bai{
/* border: 1px solid red; */
width: 100%;
/* height: 30px; */
float: left;
padding:16rpx;
margin-top: 10rpx;
}
progress{
width:40%;
float: left;
margin-left: 24%;
}
.con_bai text{
color:#A1A1A1;
font-size:10px;
float: left;
margin-top:-14rpx;
margin-left:10rpx;
}
.notdata{
width: 100%;
height: 100%;
text-align: center;
}
.notimf{
margin-top: 35%;
width: 90px;
height: 90px;
}
.nottext{
color: #999999;
}
js代码
var app = getApp();
// pages/characteristic/characteristic.js
Page({
data: {
scrollHeight: 0,//商品容器高度
productInfo:[],
currentPage:1,
notimg:false,
isdata:true,
},
onLoad: function (options) {
var that = this;
// 获取屏幕高度
wx.getSystemInfo({
success: function (res) {
that.setData({
scrollHeight: res.windowHeight
});
}
});
//初始化调用一次商品信息
wx.request({
url: app.globalData.requestUrl + 'getIndexProductListByGroup',
data: {
'web': app.globalData.webUrl,
'page': that.data.currentPage,
},
success(d) {
if(d.data.status==1){
that.setData({
productInfo: d.data.info,
})
}else{
that.setData({
notimg:true,
})
}
}
})
},
onShow: function () {
},
// 商品详情
navhref: function (e) {
// console.log(e.currentTarget.dataset.pid)
wx.navigateTo({
url: '/pages/product_info/product_info?productid='+e.currentTarget.dataset.pid, //你自己的接口
})
},
//滑动到底部触发事件
bindDownLoad: function () {
var that = this;
//调用商品信息方法
if (that.data.isdata){
getIndexProductListByGroup(that)
}
},
})
//获取商品列表信息
function getIndexProductListByGroup(that) {
wx.showLoading({ title: '加载中' });
wx.request({
url: app.globalData.requestUrl + 'getIndexProductListByGroup',
data:{
'web': app.globalData.webUrl,
'page': ++that.data.currentPage,
},
success(d){
wx.hideLoading()
if(d.data.status==1){
that.setData({
productInfo: that.data.productInfo.concat(d.data.info),
})
}else{
that.setData({
isdata:false
})
wx.showToast({
title: '没有更多商品啦',
icon:'none'
})
}
}
})
}