Fix:2721 【新品专区】商品和背景图增加同时自动轮播效果,自动轮播时是一个整体,5秒轮播一次,轮播效果查看视频
This commit is contained in:
+12
-5
@@ -4,13 +4,14 @@
|
|||||||
<rich-text :nodes="details.title"></rich-text>
|
<rich-text :nodes="details.title"></rich-text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-zone v12-mt-2">
|
<view class="banner-zone v12-mt-2">
|
||||||
<swiper :current="current" interval="3000" circular style="height:760rpx">
|
<image class="banner-zone" :src="bannerImage" ></image>
|
||||||
|
|
||||||
|
<!-- <swiper :current="current" interval="3000" circular style="height:760rpx">
|
||||||
<swiper-item v-for="(item, index) in details.newProducts" :key="index">
|
<swiper-item v-for="(item, index) in details.newProducts" :key="index">
|
||||||
<image class="banner-zone" :src="item.bannerImage" ></image>
|
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper> -->
|
||||||
<view class="swiper-wrap">
|
<view class="swiper-wrap">
|
||||||
<swiper @change="handleChange" style="height: 100%;" circular next-margin="460rpx" interval="3000">
|
<swiper @change="handleChange" style="height: 100%;" autoplay circular next-margin="460rpx" interval="3000">
|
||||||
<swiper-item v-for="(item, index) in details.newProducts" :key="index" @click="toGoods(item)">
|
<swiper-item v-for="(item, index) in details.newProducts" :key="index" @click="toGoods(item)">
|
||||||
<view class="new-card" :class="{'is-actived': current == index}">
|
<view class="new-card" :class="{'is-actived': current == index}">
|
||||||
<image :src="item.productImage" class="new-card-img" mode="heightFix|widthFix"></image>
|
<image :src="item.productImage" class="new-card-img" mode="heightFix|widthFix"></image>
|
||||||
@@ -50,7 +51,7 @@ export default{
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
details: {},
|
details: {},
|
||||||
current: 0
|
current: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@@ -58,6 +59,12 @@ export default{
|
|||||||
this.details = res.data
|
this.details = res.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
bannerImage() {
|
||||||
|
return this.details.newProducts && this.details.newProducts[this.current] && this.details.newProducts[this.current].bannerImage
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleChange(e) {
|
handleChange(e) {
|
||||||
this.current = e.detail.current
|
this.current = e.detail.current
|
||||||
|
|||||||
Reference in New Issue
Block a user