cari
Rumahapplet WeChatPembangunan program mini小程序实现自动加载的完整代码

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

Aug 10, 2018 pm 03:28 PM
Program mini

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

<!-- 头部 -->
<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 () {
}
})

相关推荐:

微信小程序实例:如何实现跑马灯的动画效果(附代码)

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

Atas ialah kandungan terperinci 小程序实现自动加载的完整代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.