如何uni-app开发商城商品详情轮播图，实现风格？
摘要：一、概述 上一篇文章，已经实现了商品列表点击跳转至商品详情页 接下来实现，商品详情轮播图，样式结构，数据渲染 效果如下： 二、商品详情轮播图 修改 pagesgoogsgoods-detail.uvue，新增轮
一、概述
上一篇文章，已经实现了商品列表点击跳转至商品详情页
接下来实现，商品详情轮播图，样式结构，数据渲染
效果如下：
二、商品详情轮播图
修改pages/googs/goods-detail.uvue，新增轮播图
完整代码如下：
<template>
<view>
<view class="goods_detail">
<!-- 轮播区域 -->
<view style="text-align: center;margin: 98px auto;color: red;" v-if="swipers.length==0">
该商品暂未设置轮播图数据
</view>
<up-swiper v-if="swipers.length>0" :list="swipers" keyName="src" indicator indicatorMode="dot"
circular></up-swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//接收的id
id: 0,
//轮播图数据
swipers: [],
}
},
onLoad(value) {
this.id = value.id;
console.log("onload拿到商品id", this.id);
//轮播图数据回显
// this.getSwipers();
},
methods: {
//获取轮播图数据
async getSwipers() {
const res = await this.$http.get('/api/getthumimages/' + this.id, {})
this.swipers = res.message;
console.log("详情页轮播图数据", this.swipers);
},
}
}
</script>
<style lang="scss">
.goods_detail {
swiper {
height: 700rpx;
image {
width: 100%;
height: 100%;
}
}
}
</style>
编译代码，效果如下：
如果没有数据，会进行提示
三、商品详情样式结构
编辑pages/googs/goods-detail.uvue，先固定一行数据
完整代码如下：
<template>
<view>
<view class="goods_detail">
<!-- 轮播区域 -->
<view style="text-align: center;margin: 98px auto;color: red;" v-if="swipers.length==0">
该商品暂未设置轮播图数据
</view>
<up-swiper v-if="swipers.length>0" :list="swipers" keyName="src" indicator indicatorMode="dot"