小程式實作自動載入的完整程式碼
小程式
這篇文章帶給大家的內容是關於小程式實現自動載入的完整程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
<!-- 头部 -->
<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 () {
}
})登入後複製
相關推薦：
以上是小程式實作自動載入的完整程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055612無法在Windows 10中安裝？
4 週前
By DDD
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
北端：融合系統，解釋
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用Python開發微信小程式
Jun 17, 2023 pm 06:34 PM
隨著行動互聯網技術和智慧型手機的普及，微信成為了人們生活中不可或缺的一個應用。而微信小程式則讓人們可以在不需要下載安裝應用程式的情況下，直接使用小程式來解決一些簡單的需求。本文將介紹如何使用Python來開發微信小程式。一、準備工作在使用Python開發微信小程式之前，需要先安裝相關的Python函式庫。這裡推薦使用wxpy和itchat這兩個函式庫。 wxpy是一個微信機器
實作微信小程式中的卡片翻轉特效
Nov 21, 2023 am 10:55 AM
實作微信小程式中的卡片翻轉特效在微信小程式中，實現卡片翻轉特效是一種常見的動畫效果，可以提升使用者體驗和介面互動的吸引力。以下將具體介紹如何在微信小程式中實現卡片翻轉的特效，並提供相關程式碼範例。首先，需要在小程式的頁面佈局檔案中定義兩個卡片元素，一個用於顯示正面內容，一個用於顯示背面內容，具體範例程式碼如下：<!--index.wxml-->&l
支付寶上線「漢字拾光-生僻字」小程序，用於徵集、補充生僻字庫
Oct 31, 2023 pm 09:25 PM
本站10月31日消息，今年5月27日，螞蟻集團宣布啟動“漢字拾光計劃”，最近又迎來新進展：支付寶上線“漢字拾光-生僻字”小程序，用於向社會徵集生僻字，補充生僻字庫，同時提供不同的生僻字輸入體驗，以幫助完善支付寶內的生僻字輸入方法。目前，用戶搜尋「漢字拾光」、「生僻字」等關鍵字就可以進入「生僻字」小程式。在小程式裡，使用者可以提交尚未被系統辨識輸入的生僻字圖片，支付寶工程師確認後，將會對字庫進行補錄入。本站注意到，使用者也可以在小程式體驗最新的拆字輸入法，這項輸入法針對讀音不明確的生僻字設計。用戶拆
小程式能用react嗎
Dec 29, 2022 am 11:06 AM
小程式能用react，其使用方法：1、基於「react-reconciler」實作一個渲染器，產生一個DSL；2、建立一個小程式元件，去解析和渲染DSL；3、安裝npm，並執行開發者工具中的建構npm；4、在自己的頁面中引入包，再利用api即可完成開發。
uniapp如何實現小程式和H5的快速轉換
Oct 20, 2023 pm 02:12 PM
uniapp如何實現小程式和H5的快速轉換，需要具體程式碼範例近年來，隨著行動網路的發展和智慧型手機的普及，小程式和H5成為了不可或缺的應用形式。而uniapp作為一個跨平台的開發框架，可以在一套程式碼的基礎上，快速實現小程式和H5的轉換，大大提高了開發效率。本文將介紹uniapp如何實現小程式和H5的快速轉換，並給出具體的程式碼範例。一、uniapp簡介unia
教你如何在小程式中用公眾號範本訊息（附詳細想法）
Nov 04, 2022 pm 04:53 PM
這篇文章給大家帶來了關於微信小程式的相關問題，其中主要介紹瞭如何在小程式中用公眾號範本訊息，下面一起來看一下，希望對大家有幫助。
用Python編寫簡單的聊天程式教程
May 08, 2023 pm 06:37 PM
實現思路x01服務端的建立首先,在服務端,使用socket進行訊息的接受,每接受一個socket的請求,就開啟一個新的線程來管理訊息的分發與接受,同時,又存在一個handler來管理所有的線程,從而實現對聊天室的各種功能的處理x02客戶端的建立客戶端的建立就要比服務端簡單多了,客戶端的作用只是對消息的發送以及接受,以及按照特定的規則去輸入特定的字符從而實現不同的功能的使用,因此,在客戶端這裡,只需要去使用兩個線程,一個是專門用於接受消息,一個是專門用於發送消息的至於為什麼不用一個呢,那是因為,只
PHP與小程式的地理位置定位與地圖顯示
Jul 04, 2023 pm 04:01 PM
PHP與小程式的地理位置定位與地圖顯示地理位置定位與地圖顯示在現代科技中已經成為了必備的功能之一。隨著行動裝置的普及，人們對於定位和地圖顯示的需求也越來越高。在開發過程中，PHP和小程式是常見的兩種技術選擇。本文將為大家介紹PHP與小程式中的地理位置定位與地圖顯示的實作方法，並附上對應的程式碼範例。一、PHP中的地理位置定位在PHP中，我們可以使用第三方地理位
