1. 程式人生 > >小程式自動載入

小程式自動載入

<!-- 頭部 -->

<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 () {

}

})

相關推薦

程式自動載入

<!-- 頭部 --> <view class='head'> <view data-order='1' bindtap='clickorder'><text class='{{a}}'>售中({{count}})</

微信程式自動滾動載入資料之坑

我的 scroll-view自動滾動,應該滾動到底部最後一個元素roll29, 但是滾動到roll21,其他的都被遮擋了。因為我是載入一天的歷史記錄,所以有可能一次性載入很多資料,這樣自動重新整理

微信程式自動更新

微信小程式專案釋出上線後,如何進行自動更新版本呢? 在主頁面載入的onload加入以下程式碼: //檢查是否存在新版本 wx.getUpdateManager().onCheckForUpdate(function (res) { // 請求完新版本資訊的回撥

程式分包載入

開發者需要將小程式劃分成不同的子包,在構建時打包成不同的分包,使用者在使用時按需進行載入。 在構建小程式分包專案時,構建會輸出一個或多個分包。每個使用分包小程式必須包含 一個主包,所謂的主包,即放置預設啟動頁/TabBar 頁面,以及一些所有分包需要用到 整個小程式所有分包大小不

程式自動修復程式碼規範

1。package.json:修改下面一行程式碼: { "name": "mpvue-demo", "version": "1.0.0", "description": "A Mpvue project", "author": "", "private": true,

微信程式之----載入中提示框loading

微信小程式之----載入中提示框loading wx.json Page({ /** * 頁面的初始資料 */ data: { }, onLoad: function (options) { // 欄目分類請求介面 var lanmu = this;

(微信程式)onload()載入不到app.globalData全域性變數的值

onLoad()載入不到app.globalData全域性變數的值 app.js globalData: { statusResult:null, } index.js wx.request({ url: 'xxx

微信程式自動定位,通過百度地圖根據經緯度獲取該地點所在城市資訊

微信小程式獲得經緯度 var that = this wx.getLocation({ type: 'wgs84', success(res) { console.log(res) that.setData({

實戰解決程式圖片載入問題

相較於web端或者H5開發,小程式本身在效能上弱很多(但使用者體驗上要好)。以前開發時伺服器效能過剩在那裡幫你撐著臉面,你對自己的程式碼質量和程式設計習慣心裡沒數,小程式就是一面鏡子。 廢話少說,要解決的問題是,小程式載入圖片閃爍,漸漸出現,出現的很慢等等效果不

程式自動生成圖片的標籤

<view class="name" wx:for="{{array}}" wx:key="index"> <image style="transform:translate({{item.offsetX}}px, {{item.offsetY}}px) ;" class=

微信程式——分包載入

某些情況下,開發者需要將小程式劃分成不同的子包,在構建時打包成不同的分包,使用者在使用時按需進行載入。 分包載入很簡單,重要的是在app.json裡面分配好url 。 1、在目錄中新建檔案。 首先在“pages”:{ "pages/pagesA/onePage/o

微信程式 - 分包載入(分包使用)

使用分包 在app.json配置"subpackages"   在pages同級目錄新建資料夾以及檔案     打包原則 宣告 subpackages 後,將按 subpackages 配置路徑進行打包,subpackages 配置路徑外的目錄將被打包

微信程式載入狀態新增和隱藏

使用下面程式碼新增 wx.showToast({ title:'載入中', icon:'loading', mask:true }) 然後我們呼叫下面方法進行隱藏loading狀態 wx.hideToast(); 這

微信程式自動去除input空格的方法

 有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群   173683895  、 526474645 ; 正文: 當用戶輸入賬號或者密碼的時候,可能會有輸入空格的情況,但是實際需要是不能夠有空格的,所以我們要做一個去除空格,並且適應所有i

程式自動登入實現

微信小程式之登入 第一步:獲取登入態code 微信登入部分,首先需要使用微信小程式的api—— wx.login(OBJECT)來獲取登入態 這個登入態的作用是為了獲取使用者的openid(使用者的唯一標識); 官方示例 js部分: //呼叫登入

微信程式分包載入實戰

"離線包"機制微信小程式採用的是類似離線包載入方案,以 轉轉 小程式為例,當用戶第一次開啟時會先下載好所有程式碼,然後再載入頁面;當用戶再次進入轉轉小程式時,會直接使用已下載的程式碼,省去了程式碼下載的過程,開啟速度更快。看似很美好的設計,但有兩個問題:第一次開啟轉轉小程式時

初級前端程式專案載入速度優化

這份文字是根據近期團隊做來問丁香醫生 SPA 和 丁香醫生小程式 載入速度優化的經歷整理而成。 效果 古人有一句話叫做:治感冒看療效。既然是關於速度優化的,我們就先來看一下優化的效果。 Chrome Network 選取了訪問量較大的首頁和我的頁面進行隨機取樣,

微信程式顯示載入彈窗(showLoading)的過程中攔截圖幕滑動事件

        這篇文章對於熟悉小程式開發的人或者說熟悉開發文件的人來說簡直就是雞肋,因為沒有技術性可言。不過,對於像我這種入門者而且沒有多看文件的人來說,多少會有些用,思考再三還是寫篇文章記錄下好了,沒有惡意刷存在感[笑哭.gif]。        場景是這樣的:我的頁面中

程式自動更新版本小結

小程式迭代的比較快,每次釋出了新的程式碼,都更新不及時,著急的時候,得刪除了重新搜尋才可以。覺得很麻煩,就查了一些方法。     // 獲取小程式更新機制相容         if (wx.can