简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > 微信小程序 > 小程序开发 > 正文

小程序实现自动加载的完整代码

不言
发布： 2018-08-10 15:28:44
原创
3201 人浏览过

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

<!-- 头部 -->
<view class=&#39;head&#39;>
<view data-order=&#39;1&#39; bindtap=&#39;clickorder&#39;><text class=&#39;{{a}}&#39;>售中({{count}})</text></view>
<view data-order=&#39;2&#39; bindtap=&#39;clickorder&#39;><text class=&#39;{{b}}&#39;>已售({{counts}})</text></view>
</view>
<block wx:if="{{choose==1}}">
<block wx:for="{{goods_list}}">
<view class=&#39;shop-middle&#39;>
<view class=&#39;shop-img&#39;>
<!-- <image mode=&#39;widthFix&#39; src="https://sungroow.com/{{item.image_middle}}"></image> -->
<image src="https://sungroow.com{{item.image_thumb}}"></image>
</view>
<view class=&#39;shop-num&#39;>
<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=&#39;onsale&#39;>下架</button>
</block>
<block wx:if="{{item.is_sale==0}}">
<button size="mini" type="default" data-goods="{{item.goods_id}}" bindtap=&#39;onsale&#39;>上架</button>
</block>
</view>
</view>
</block>
</block>
 
<block wx:if="{{choose==2}}">
<block wx:for="{{order_list}}">
<view class=&#39;shop-middle&#39;>
<view class=&#39;shop-img&#39;>
<!-- <image mode=&#39;widthFix&#39; src="https://sungroow.com/{{item.image_middle}}"></image> -->
<image src="https://sungroow.com{{item.image_thumb}}"></image>
</view>
<view class=&#39;shop-num&#39;>
<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=&#39;onsale&#39;>下架</button>
</block>
<block wx:if="{{item.is_sale==0}}">
<button size="mini" type="default" data-goods="{{item.goods_id}}" bindtap=&#39;onsale&#39;>上架</button>
</block>
</view>
</view>
</block>
</block>
 
<view class=&#39;{{show}}&#39;>商品加载完毕</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(&#39;../../../utils/util.js&#39;)
Page({
 
/**
* 页面的初始数据
*/
data: {
show: &#39;is-hide&#39;,
page:0,
pages:0,
a: &#39;line&#39;,
b: &#39;&#39;,
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: &#39;line&#39;,
b: &#39;&#39;,
c: &#39;&#39;,
d: &#39;&#39;,
e: &#39;&#39;,
f: &#39;&#39;,
choose:1
})
that.index(that.data.store_id,that.data.page);
} else if (id == 2) { //待付款
var that = this
that.setData({
a: &#39;&#39;,
b: &#39;line&#39;,
c: &#39;&#39;,
d: &#39;&#39;,
e: &#39;&#39;,
f: &#39;&#39;,
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(&#39;key&#39;)
console.log(that.data.page)
that.setData({
key: key
})
com.POST({
url: &#39;Order/wait_pay_all&#39;,
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: &#39;is-show&#39;
})
} else {
// wx.showToast({
// title: &#39;暂无订单&#39;,
// icon: &#39;none&#39;,
// duration: 2000
// })
}
}
})
 
},
//上架
onsale(e){
var goods_id=e.currentTarget.dataset.goods
 
//最新
var that = this
wx.getStorage({
key: &#39;key&#39;,
success: function (res) {
com.POST({
url: &#39;Goods/on_sale&#39;,
data: {
key: res.data,
goods_id: goods_id
},
success: function (msg) {
console.log(msg)
if (msg.data.code == 200) {
wx.showModal({
title: &#39;温馨提示&#39;,
content: msg.data.datas,
success: function (res) {
if (res.confirm) {
wx.switchTab({
url: &#39;/pages/my/index&#39;
})
}
}
 
})
} else {
wx.showModal({
title: &#39;温馨提示&#39;,
content: msg.data.error,
success: function (res) {
if (res.confirm) {
wx.switchTab({
url: &#39;/pages/my/index&#39;
})
}
}
})
}
}
})
}
})
},
 
//设计师所有的商品
 
index(options,page){
//最新
var that = this
var list = that.data.goods_list;
var lists = [];
console.log(that.data.page)
wx.getStorage({
key: &#39;key&#39;,
success: function (res) {
com.POST({
url: &#39;Goods/goods_list&#39;,
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: &#39;is-show&#39;
})
// wx.startPullDownRefresh();
} else {
// wx.showModal({
// title: &#39;温馨提示&#39;,
// content: msg.data.error,
// success: function (res) {
// if (res.confirm) {
// // wx.switchTab({
// // url: &#39;/pages/index/index&#39;
// // })
// }
// }
// })
}
}
})
}
})
},
 
/**
* 生命周期函数--监听页面加载
*/
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 () {
}
})
登录后复制

相关推荐：

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

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

以上是小程序实现自动加载的完整代码的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
小程序
来源：php.cn
上一篇：微信小程序实例：如何实现跑马灯的动画效果（附代码） 下一篇：小程序中生命周期的解析（附代码）
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是，我没有运气让它改变样式。StringcssStyle=...
来自于 2024-04-06 20:57:16
0
1
487
在网络应用程序中显示版本信息的最佳实践是什么？ 我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...
来自于 2024-04-06 19:13:16
0
2
476
为什么我的 hr 标签设置为白色纯色时是半透明的？ 我有一个html（带有引导程序）和一个CSS，在我的html中我有一个<hr>标签，它有一个类，然后在我的CSS中我有它的边框样式。它是半透明的，你可以看到白色，但它不...
来自于 2024-04-06 16:13:26
0
1
500
无法使用React从Go服务器获取cookie数据 在React后我开始进入后端，并在后端服务器上添加了githubOAUTH和会话来保存数据。它们在后端都工作正常，我可以通过会话等从其他处理程序访问数据。但是一旦我尝试使用Reac...
来自于 2024-04-06 13:09:26
0
1
384
Laravel 9.x中的常规错误：字段'id'在没有默认值的情况下 我在我的应用程序中使用UUID，并且我已经实现了该特征，如在线所示，如下所示：traitUuid{protectedstaticfunctionboot():void{parent...
来自于 2024-04-06 11:12:54
0
1
350
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！