### [小程序实现自动加载的完整代码](https://www.prosaas.cn/article/17166)

**Published:** 2018-08-10T07:28:44

**Author:** 5201314

**Excerpt:** 本篇文章给大家带来的内容是关于小程序实现自动加载的完整代码，有一定的参考价值，有需要的朋友可以参考一下，希望对…

本篇文章给大家带来的内容是关于小程序实现自动加载的完整代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!-- 头部 -->
<view class='head'>
<view data-order='1' bindtap='clickorder'><text class='{{a}}'>售中({{count}})</text></view>
<view data-order='2' bindtap='clickorder'><text class='{{b}}'>已售({{counts}})</text></view>
</view>
<block wx:if="{{choose==1}}">
<block wx:for="{{goods\_list}}">
<view class='shop-middle'>
<view class='shop-img'>
<!-- <image mode='widthFix' src="https://sungroow.com/{{item.image\_middle}}"></image> -->
<image src="https://sungroow.com{{item.image\_thumb}}"></image>
</view>
<view class='shop-num'>
<view>{{item.goods\_name}}</view>
<view>￥ {{item.price}}</view>
</view>
<view class="but\_all">
<block wx:if="{{item.is\_sale==1}}">
<button size="mini" type="default" data-goods="{{item.goods\_id}}" bindtap='onsale'>下架</button>
</block>
<block wx:if="{{item.is\_sale==0}}">
<button size="mini" type="default" data-goods="{{item.goods\_id}}" bindtap='onsale'>上架</button>
</block>
</view>
</view>
</block>
</block>
 
<block wx:if="{{choose==2}}">
<block wx:for="{{order\_list}}">
<view class='shop-middle'>
<view class='shop-img'>
<!-- <image mode='widthFix' src="https://sungroow.com/{{item.image\_middle}}"></image> -->
<image src="https://sungroow.com{{item.image\_thumb}}"></image>
</view>
<view class='shop-num'>
<view>{{item.goods\_name}}</view>
<view>x{{item.goods\_number}}件</view>
<view>￥ {{item.goods\_price}}</view>
</view>
<view class="but\_all">
<block wx:if="{{item.is\_sale==1}}">
<button size="mini" type="default" data-goods="{{item.goods\_id}}" bindtap='onsale'>下架</button>
</block>
<block wx:if="{{item.is\_sale==0}}">
<button size="mini" type="default" data-goods="{{item.goods\_id}}" bindtap='onsale'>上架</button>
</block>
</view>
</view>
</block>
</block>
 
<view class='{{show}}'>商品加载完毕</view>
 
 
 
/\* //顶部 \*/
.head {
position: relative;
width: 100%;
height: 60rpx;
flex-direction: row;
display: flex;
align-items: center;
/\* left: -20rpx; \*/
border-bottom: 1.4px #e6e6e6 solid;
border-top: 1.4px #e6e6e6 solid;
}
 
.head view {
position: relative;
/\* margin-left: 52rpx; \*/
font-size: 27rpx;
color: #414141;
display: flex;
justify-content:center;
width: 50%;
 
}
.line{
border-bottom:1.4px #414141 solid;
}
 
/\*主体 \*/
.shop-middle{
position: relative;
height: 170rpx;
width: 100%;
border-bottom: 1.4px #e6e6e6 solid;
border-top: 1.4px #e6e6e6 solid;
padding-top:10rpx;
 
}
 
.shop\_rank image{
position: relative;
height:32rpx;
width:74rpx;
 
}
 
.shop-img {
display: flex;
flex-direction: row;
width: 25%;
font-size: 29rpx;
}
 
.shop-img image {
height:160rpx;
width:160rpx;
margin-right:22rpx;
 
}
 
.shop-num {
justify-content: space-between;
position: absolute;
left: 200rpx;
width: 75%;
display: flex;
flex-direction: column;
font-size: 25rpx;
top:0rpx;
}
 
.shop-num view {
position: relative;
margin-top: 15rpx;
overflow: hidden;
}
.but\_all{
position:relative;
 
left:620rpx;
top:-50rpx;
 
}
 
.is-show{
position: relative;
width: 100%;
height: 70rpx;
display:flex;
justify-content:center;
align-items:center;
font-size:28rpx;
/\* border-top:1.4px #e6e6e6 solid; \*/
 
}
.is-hide{
display: hidden;
}
 
var app = getApp()
var com = require('../../../utils/util.js')
Page({
 
/\*\*
\* 页面的初始数据
\*/
data: {
show: 'is-hide',
page:0,
pages:0,
a: 'line',
b: '',
goods\_list:\[\],
count:0,
counts:0,
choose:1,
order\_list:\[\]
},
// 头部
clickorder(e) {
var that = this
console.log(e)
var id = e.currentTarget.dataset.order
if (id == 1) {
that.setData({
a: 'line',
b: '',
c: '',
d: '',
e: '',
f: '',
choose:1
})
that.index(that.data.store\_id,that.data.page);
} else if (id == 2) { //待付款
var that = this
that.setData({
a: '',
b: 'line',
c: '',
d: '',
e: '',
f: '',
choose:2
})
that.getindex(that.data.page)
}
},
//获取全部订单
getindex: function (page) {
var that = this;
var list = that.data.order\_list;
console.log(list)
var lists = \[\];
var key = wx.getStorageSync('key')
console.log(that.data.page)
that.setData({
key: key
})
com.POST({
url: 'Order/wait\_pay\_all',
data: {
key: that.data.key,
pay\_status: 2,
shipping\_status: 1,
order\_status: 1,
limit:10,
page:page
},
success: function (msg) {
console.log(msg.data.datas)
if (msg.data.code == 200) {
lists = list.concat(msg.data.datas)
that.setData({
page:that.data.page+1,
counts: msg.data.datas\[0\].countsss,
order\_list: lists,
show: 'is-show'
})
} else {
// wx.showToast({
// title: '暂无订单',
// icon: 'none',
// duration: 2000
// })
}
}
})
 
},
//上架
onsale(e){
var goods\_id=e.currentTarget.dataset.goods
 
//最新
var that = this
wx.getStorage({
key: 'key',
success: function (res) {
com.POST({
url: 'Goods/on\_sale',
data: {
key: res.data,
goods\_id: goods\_id
},
success: function (msg) {
console.log(msg)
if (msg.data.code == 200) {
wx.showModal({
title: '温馨提示',
content: msg.data.datas,
success: function (res) {
if (res.confirm) {
wx.switchTab({
url: '/pages/my/index'
})
}
}
 
})
} else {
wx.showModal({
title: '温馨提示',
content: msg.data.error,
success: function (res) {
if (res.confirm) {
wx.switchTab({
url: '/pages/my/index'
})
}
}
})
}
}
})
}
})
},
 
//设计师所有的商品
 
index(options,page){
//最新
var that = this
var list = that.data.goods\_list;
var lists = \[\];
console.log(that.data.page)
wx.getStorage({
key: 'key',
success: function (res) {
com.POST({
url: 'Goods/goods\_list',
data: {
key: res.data,
store\_id: options.store\_id,
limit: 10,
page: page,
is\_sale: 1
},
success: function (msg) {
console.log(msg)
if (msg.data.code == 200) {
lists = list.concat(msg.data.datas)
console.log(lists)
that.setData({
page:that.data.page +1,
goods\_list: lists,
count: msg.data.datas\[0\].count,
show: 'is-show'
})
// wx.startPullDownRefresh();
} else {
// wx.showModal({
// title: '温馨提示',
// content: msg.data.error,
// success: function (res) {
// if (res.confirm) {
// // wx.switchTab({
// // url: '/pages/index/index'
// // })
// }
// }
// })
}
}
})
}
})
},
 
/\*\*
\* 生命周期函数--监听页面加载
\*/
onShow: function (options) {
this.index(this.data.store\_id, this.data.pages)
this.getindex(this.data.pages)
},
 
onLoad: function (options){
this.setData({
store\_id: options
})
this.index(options, this.data.pages)
this.getindex(this.data.pages)
},
 
/\*\*
\* 生命周期函数--监听页面初次渲染完成
\*/
onReady: function () {
},
 
/\*\*
\* 生命周期函数--监听页面显示
\*/
 
/\*\*
\* 生命周期函数--监听页面隐藏
\*/
onHide: function () {
},
 
/\*\*
\* 生命周期函数--监听页面卸载
\*/
onUnload: function () {
},
 
//滚动到底部触发事件
onReachBottom: function () {
 
let that = this;
console.log("上拉", that.data.pages)
// if (that.data.searchLoading && !that.data.searchLoadingComplete) {
that.setData({
pages: that.data.pages + 1, //每次触发上拉事件，把searchPageNum+1
// isFromSearch: false //触发到上拉事件，把isFromSearch设为为false
});
// console.log(that.data.counts, that.data.count)
if (that.data.choose==2){
that.getindex(that.data.pages)
} else if (that.data.choose == 1){
that.index(that.data.store\_id, that.data.pages)
}
 
},
 
/\*\*
\* 页面相关事件处理函数--监听用户下拉动作
\*/
onPullDownRefresh: function () {
wx.stopPullDownRefresh()
},
 
/\*\*
\* 用户点击右上角分享
\*/
onShareAppMessage: function () {
}
})

相关推荐：

微信小程序实例：如何实现跑马灯的动画效果（附代码）

微信小程序实例：收藏与取消收藏图片以及切换图片的功能效果

以上就是小程序实现自动加载的完整代码的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** 微信小程序

**Categories:** 后端开发

---