小程序上拉加载

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'
				})
			}
		}
	})
}