abstract：商品详情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({
/**
* 页面的初始数据
*/
data: {
list: []//定义list数组变量，用于与wxml文件数据传送
},
/**
* 生命周期函数--监听页面加载
*/
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数据中获得到的对应的图片赋值给全局变量img
this.setData({
list: e//通过接口从服务器端或得到数据，将数据赋值给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>加入购物车，下单等功能，，讲完再弹出这个作业，还能总结的再详细些！
Correcting teacher：韦小宝Correction time：2018-11-22 16:21:03
Teacher's summary：嗯！写的很不错！你的反馈我们会处理的！谢谢！继续加油学习吧！！