微信小程式商品詳情頁互動原始碼（選擇商品型別切換、預覽商品圖片）

阿新 • • 發佈：2019-02-14

Page({ data: { //商品資訊，假裝請求到的資訊 orinGoodMsg: { "good": { "visible": "101", "tourist_dis_price": 510, "good_identity": "00204", "good_sell": "100", "good_brand": "", "last_modify_time": "2017-08-08 20:10:05", "good_place": "101", "good_type": "2", "good_display_img": "../../image/swiper.jpg", "dealer_price": 0, "last_modify_id"

: "1", "good_id": "17", "good_fill": "", "good_number": 35, "good_status": "9001", "good_unit": "套", "good_format": "", "good_column": "100902", "wholesaler_dis_price": 255, "dealer_dis_price": 265, "tourist_price": 0, "good_name": "絢彩活性棉提花四件套", "wholesaler_price": 0, "good_mark": "床單270x270cm被套200x230cm枕套48x74+6cm"

}, "goodflowers": [{ "flower_name": "朝花夕拾", "flower_id": "11d75c6a560a4345b232706f7642de22", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "美麗相約", "flower_id": "3994afdb0427425d93bbba6e881601c3", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity"

: "" }, { "flower_name": "清水佳人", "flower_id": "3ebc1032eb5d477b9e2bf508918f3d2b", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "意境幽藍", "flower_id": "425cc030c0574344a62be9674c854ee6", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "出水芙蓉", "flower_id": "4ea02d08e2464ba681e4861451a7a2f7", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "國色天香", "flower_id": "5501ed259aa6476eafff940e9cf16e5a", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "春日暢想", "flower_id": "85d540c79c244e40bb88744cdd1aa5ce", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花葉細雨", "flower_id": "877e01699f30449ebf99bfe689711159", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "琪花搖曳", "flower_id": "979e579413ea467fb363a1c85f36f092", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "絮語飄香", "flower_id": "ba7ef47a8fec4ec192d958d3c400bf7b", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "凝香雨露", "flower_id": "d24fa5772f754cfbb6650df587167c2f", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花開柔情", "flower_id": "dbd7f42a97c04c0aa1bc24b27d2546d3", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "幻彩花園", "flower_id": "eff884ebeb7c42008f38a58785818031", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }], "roleType": "2", "isAdmin": true }, good: {//商品 }, mainImg: '',//主圖 goodPrice: 99.99,//商品價格 goodOrinPrice: 999.99, goodflowers: [ ], imgUrls: [//輪播圖 ], chooseFlowers: [//選中的花色 ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, flowerImgSelect: '',//選中的花色圖片 flowerNameSelect: "",// flowerSelect: 0,//判斷是否選中 isHidden: 0, animationData: {},//選擇動畫 showModalStatus: false,//顯示遮罩 goodNum: 1,//商品數量 select: 0,//商品詳情、引數切換 }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var that = this; if (wx.showLoading) { wx.showLoading({ title: '載入中', }) } var data = that.data.orinGoodMsg;//寫死的商品資訊 var goodBaseMsg = data.good;//商品基本資訊 var goodflowersMsg = data.goodflowers;//商品花色資訊 var swiperAy = [];//倫比途 var goodPrice = 999.99;//顯示價格 var goodOrinPrice = 999.99;//劃線價格 for (var i = 0; i < goodflowersMsg.length; i++) { var jo = { flower_image: goodflowersMsg[i].flower_image, flower_id: goodflowersMsg[i].flower_id, } swiperAy.push(jo); }; that.setData({//商品 mainImg: goodBaseMsg.good_display_img, flowerImgSelect: goodBaseMsg.good_display_img, good: goodBaseMsg, goodflowers: goodflowersMsg, imgUrls: swiperAy, goodPrice: goodPrice, goodOrinPrice: goodOrinPrice, }); if (wx.hideLoading()) { wx.hideLoading() } }, /**選擇花色 */ chooseFlower: function (data) { var that = this; var flower_id = data.currentTarget.dataset.select; var flower_name = data.currentTarget.dataset.flowerName; that.setData({//把選中值，放入判斷值中 flowerNameSelect: flower_name, flowerSelect: flower_id }) var str = flower_id + ',' + flower_name; var chooseFlowers = that.data.chooseFlowers; chooseFlowers = []; chooseFlowers.push(str); that.setData({ chooseFlowers: chooseFlowers, flowerImgSelect: data.currentTarget.dataset.img }) }, /**點選選擇花色按鈕、顯示頁面 */ viewFlowerArea: function (data) { var that = this; var animation = wx.createAnimation({//動畫 duration: 500,//動畫持續時間 timingFunction: 'linear',//動畫的效果動畫從頭到尾的速度是相同的 }) animation.translateY(0).step()//在Y軸偏移tx，單位px this.animation = animation that.setData({ showModalStatus: true,//顯示遮罩 animationData: animation.export() }) that.setData({//把選中值，放入判斷值中 isHidden: 1, }) }, /**隱藏選擇花色區塊 */ hideModal: function (data) { var that = this; that.setData({//把選中值，放入判斷值中 showModalStatus: false,//顯示遮罩 isHidden: 0, }) }, goodAdd: function (data) { var that = this; var goodCount = that.data.goodNum + 1; that.setData({//商品數量+1 goodNum: goodCount }) }, goodReduce: function (data) { var that = this; var goodCount = that.data.goodNum - 1; that.setData({//商品數量+1 goodNum: goodCount }) }, /**商品詳情、引數切換 */ changeArea: function (data) { var that = this; var area = data.currentTarget.dataset.area; that.setData({ "select": area }); }, /** * 加入購物車 */ addCart: function (data) { var that = this; var thatData = that.data; var ja = thatData.chooseFlowers;//選中的花色id var good_id = thatData.good.good_id;//good_id var good_name = thatData.good.good_name;//good_name var gn = thatData.goodNum;//數量 var good_price = thatData.goodPrice;//價格 if (ja.length > 0) { wx.showToast({ title: '成功！', duration: 2000, }) } else { wx.showToast({ title: '您還沒有選擇花色哦~', duration: 2000, }) } }, /** * 生成訂單 */ saveOrder: function (data) { var that = this; var thatData = that.data; var ja = thatData.chooseFlowers;//選中的花色 var good_id = thatData.good.good_id;//good_id var good_name = thatData.good.good_name;//good_name var gn = thatData.goodNum;//數量 var good_price = thatData.goodPrice;//價格v var goodDisplayImg = thatData.mainImg;//主圖 if (ja.length > 0) { wx.showToast({ title: '成功！', duration: 2000, }) } else { wx.showToast({ title: '您還沒有選擇花色哦~', duration: 2000, }) } }, /** * 檢視輪播圖片 */ seeSwiperAll: function (e) { this.seePreviewImg(0, e.currentTarget.dataset.img) }, /** * 檢視花色圖片 * */ seeFlowersAll: function (e) { this.seePreviewImg(1, e.currentTarget.dataset.img) }, /** * 預覽圖片 * * 無法顯示本地圖片！！！！！！！ * 無法顯示本地圖片！！！！！！！ * 無法顯示本地圖片！！！！！！！ * * @pd 0表示輪播圖、 1表示花色 */ seePreviewImg: function (pd, showImg) { var array = []; var that = this; if (pd == 0) { var imgArray = that.data.imgUrls; for (var i = 0; i < imgArray.length; i++) { array.push(imgArray[i].flower_image) } } else if (pd == 1) { var imgArray = that.data.imgArray; for (var i = 0; i < imgArray.length; i++) { array.push(imgArray[i].url) } } wx.previewImage({ current: showImg, // 當前顯示圖片的http連結 urls: array // 需要預覽的圖片http連結列表 }) }, })

微信小程式商品詳情頁互動原始碼（選擇商品型別切換、預覽商品圖片）

微信小程式商品詳情頁互動原始碼（選擇商品型別切換、預覽商品圖片）

微信小程式生成詳情內容頁 Thinkphp後臺呼叫資料庫

微信小程式之分頁載入的的案例

微信小程式生成列表頁帶分頁功能 Thinkphp後臺呼叫資料庫

微信小程式實現標籤頁滑塊效果

微信小程式之登入頁例項 —— 微信小程式實戰系列（5）

微信小程式之登入頁例項

【微信小程式】微信小程式與後臺的互動

微信小程式之首頁圓形導航條

微信小程式模板-分頁滑動欄

微信小程式外掛功能頁開發詳細流程

微信小程式物流詳情頁面

使用高德地圖微信小程式SDK開發案例-輸入提示（附原始碼）

微信小程式--Web-View重新整理Html頁面（改）

微信小程式：公告字幕滾動播放（文字跑馬燈效果）

微信小程式中換行，空格（多個空格）寫法

微信小程式坑-scroll-view滑動列表（就一行，沒有填滿螢幕就會觸發上拉載入事件）

微信小程式-01-專案組成檔案介紹（入門篇）

微信小程式向左滑動刪除操作（類仿微信、QQ）

微信小程式彈出層的實現（動畫）

微信小程式商品詳情頁互動原始碼（選擇商品型別切換、預覽商品圖片）

相關推薦