35 商品详情 放大预览图片
// pages/goods_detail/index.js
/**
* 1 发生请求获取数据
* 2 点击轮播图 预览大图
* 1 给轮播图绑定点击事件
* 2 调用小程序的API previewImage
*
*
*
*/
Page({
/**
* 页面的初始数据
*/
data: {
goodsObj:{}
},
// 商品对象
GoodsInfo:{},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 获取商品详情数据
async getgoodsdetail(goods_id){
const goodsObj=await request({url:"/goods/detail",data:{goods_id}});
this.GoodsInfo=goodsObj;
this.setData({
goodsObj:{
goods_name:goodsObj.goods_name,
goods_price:goodsObj.goods_price,
// iPhone 部分手机 不识别 webp 图片格式
// 最好找到后台， 让他进行修改
// 临时自己改 确保后台存在 1.webp => 1.jpg
}
})
},
//点击轮播图 放大预览
handlePrevewImage(){
// console.log("预览");
//1 先构造要预览的图片数组
const urls=this.GoodsInfo.pics.map(v=v.pics_mid);
//2 接收传递过来的图片URL
const current=e.currentTarget.dataset.url;
wx-wx.previewImage({
urls,
current
})
},
// 获取商品详情数据
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
--------------------------
效果实现的代码
<!--pages/goods_detail/index.wxml-->
<!--
<swiper-item
wx:for="{{goodsObj.pics}}"
wx:key="pics_id"
bindtap="handlePrevewImage"
></swiper>
编译报错，只能注释掉了。虽然一比一复制，前面的没弄好，后面直接就加入，肯定不行的4.3
data-url={{""}}
-->
<!-- 33 商品详情 价格 名称 图文详情 -->
<view class="goods_price">￥{{goodsObj.goods_price}} </view>
<view class="goods_name_row">
<view class="goods_name">{{goodsObj.goods_name}}</view>
<view class="goods_collect">
<text class="iconfont icon-shoucang"> </text>
<!-- 写好这句代码，文字图标就都出现了。 -->
<view class="coller_text"> 收藏</view>
</view>
</view>
<view class="goods_info">
<view class="goods_info_title">图文详情</view>
<view class="goods_info_content">
<!-- 要用富文本，这行代码 -->
<rich-text nodes="{{goodsObj.goods.introduce}}"></rich-text>
</view>
</view>