配置商品轮播图片虚拟路径映射
registry.addResourceHandler("/image/productSwiperImgs/**").addResourceLocations("file:D:\\java1234-mall-v3\\productSwiperImgs\\");
定义商品详情初始化对象以及调用后端接口获取商品详情数据
import { requestUtil,getBaseUrl } from "../../utils/requestUtil"
Page({
/**
* 页面的初始数据
*/
data: {
baseUrl:'',
productObj:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const baseUrl=getBaseUrl();
this.setData({
baseUrl
})
this.getProductDetail(options.id)
},
/**
* 获取商品详情
* @param {*} id
*/
async getProductDetail(id){
const result = await requestUtil({
url:'/product/detail',
data:{id},
method:"GET"
});
this.setData({
productObj:result.message
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
.product_swiper{
swiper{
height: 100vw;
swiper-item{
navigator{
image{}
}
}
}
}
<view class="product_swiper">
<swiper autoplay circular indicator-dots>
<swiper-item
wx:for="{{productObj.productSwiperImageList}}"
wx:key="id"
>
<navigator>
<image mode="widthFix" src="{{baseUrl+'/image/productSwiperImgs/'+item.image}}"></image>
</navigator>
</swiper-item>
</swiper>
</view>
{
"usingComponents": {},
"navigationBarTitleText": "商品详情"
}