轮播图和预览效果
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item,index) in goods_info.pics" :key="index">
<image :src="item.pics_big" @click="preview(index)"></image>
</swiper-item>
</swiper>
methods:{
// 定义请求商品详情数据的方法
async getGoodsDetail(goods_id) {
const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
if (res.meta.status !== 200) return uni.$showMsg()
// 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题
// 使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名
res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
// 为 data 中的数据赋值
this.goods_info = res.message
},
// 实现轮播图的预览效果
preview(index) {
// 调用 uni.previewImage() 方法预览图片
uni.previewImage({
// 预览时，默认显示图片的索引
current: index,
// 所有图片 url 地址的数组
urls: this.goods_info.pics.map(x => x.pics_big)
})
}
},
onLoad(options) {
// 获取商品 Id
const goods_id = options.goods_id
// 调用请求商品详情数据的方法
this.getGoodsDetail(goods_id)
}
}
一个坑关于初始值给NULL和 {}
如果初始值写{}空对象,那么点一个东西不存在,不会报错
但是如果为null,就会报错提示点之前是无效数据.点不出来
随便给一个能渲染出来的值来判断就可以了
<view v-if="goods_info.goods_name">
data() {
return {
// 商品详情对象
goods_info: {}
};
},
