摘要：商品詳情JS邏輯交互頁面// pages/index/index.js const app = getApp(); var com = require("../../utils/util.js");//加載公共的JS配置文件 var img = [];  //

商品詳情JS邏輯交互頁面

// pages/index/index.js
const app = getApp();
var com = require("../../utils/util.js");//加載公共的JS配置文件
var img = [];  //定義img全局變量，主要用于詳情頁圖片點擊全屏顯示
Page({
/**
   * 頁面的初始數(shù)據(jù)
   */
data: {
list: []//定義list數(shù)組變量，用于與wxml文件數(shù)據(jù)傳送
},
/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
onLoad: function (e) {
console.log(e);
com.post('Api/Home/shop_details', { id: e.id }, "setContent", this);
},
setContent: function (e) {
console.log(e);
img = e.imgs;//將從API數(shù)據(jù)中獲得到的對應的圖片賦值給全局變量img
this.setData({
list: e//通過接口從服務器端或得到數(shù)據(jù)，將數(shù)據(jù)賦值給list變量傳到wxml模板文件中
});
},
/**
   * 放大圖片
   */
previewImage: function (e) {
console.log(e);
wx.previewImage({
urls: img,//從服務器端得到的對應字段的所有圖片
current: e.currentTarget.dataset.src//當前的圖片路徑
})
}


})

商品詳情wxml模板頁面

<!--pages/goods/details.wxml-->
<view class="rele-wrap">
<view class="has-bottom">
<swiper class="banner" indicator-dots="true"
autoplay="true" interval="5000" duration="1000" indicator-color="#fff" indicator-active-color="#000">
<block wx:for="{{list.imgs}}" wx:key="">
<swiper-item>
<image src="{{item}}" class="vi_img" bindtap="previewImage" data-src="{{item}}"/>
</swiper-item>
</block>
</swiper>
<view class="idle-panel">
<view class="p1">{{list.title}}</view>
<view class="p2"><text class="span">{{list.price}}元</text></view>
</view>
<view class="sale-panel">
<view class="tit">商品詳情</view>
<view class="all open">{{list.desc}}</view>
</view>
</view>

</view>

加入購物車，下單等功能，，講完再彈出這個作業(yè)，還能總結的再詳細些！

批改老師：韋小寶批改時間：2018-11-22 16:21:03
老師總結：嗯！寫的很不錯！你的反饋我們會處理的！謝謝！繼續(xù)加油學習吧！！