Commit 05d58419be4cc9587ec5bd0c4e6a3df76f5e14a7
1 parent
944ff836
轮播图为一张的时候不展示轮播组件
Showing
2 changed files
with
28 additions
and
19 deletions
src/components/swiper/swiper.less
| @@ -12,24 +12,6 @@ | @@ -12,24 +12,6 @@ | ||
| 12 | .swipe-item { | 12 | .swipe-item { |
| 13 | width: 100%; | 13 | width: 100%; |
| 14 | height: 100%; | 14 | height: 100%; |
| 15 | - .item { | ||
| 16 | - display: flex; | ||
| 17 | - justify-content: center; | ||
| 18 | - align-items: center; | ||
| 19 | - width: 100%; | ||
| 20 | - height: 100%; | ||
| 21 | - border-radius: 16px; | ||
| 22 | - overflow: hidden; | ||
| 23 | - .img-box { | ||
| 24 | - .img { | ||
| 25 | - display: block; | ||
| 26 | - width: 100%; | ||
| 27 | - height: auto; | ||
| 28 | - border-radius: 16px; | ||
| 29 | - overflow: hidden; | ||
| 30 | - } | ||
| 31 | - } | ||
| 32 | - } | ||
| 33 | } | 15 | } |
| 34 | /deep/ .van-swipe__indicators { | 16 | /deep/ .van-swipe__indicators { |
| 35 | left: unset; | 17 | left: unset; |
| @@ -51,3 +33,21 @@ | @@ -51,3 +33,21 @@ | ||
| 51 | } | 33 | } |
| 52 | } | 34 | } |
| 53 | } | 35 | } |
| 36 | +.item { | ||
| 37 | + display: flex; | ||
| 38 | + justify-content: center; | ||
| 39 | + align-items: center; | ||
| 40 | + width: 100%; | ||
| 41 | + height: 100%; | ||
| 42 | + border-radius: 16px; | ||
| 43 | + overflow: hidden; | ||
| 44 | + .img-box { | ||
| 45 | + .img { | ||
| 46 | + display: block; | ||
| 47 | + width: 100%; | ||
| 48 | + height: auto; | ||
| 49 | + border-radius: 16px; | ||
| 50 | + overflow: hidden; | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | +} |
src/components/swiper/swiper.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="swiper-box" v-if="swipers && swipers.length"> | 2 | <div class="swiper-box" v-if="swipers && swipers.length"> |
| 3 | - <swipe class="swipe" :autoplay="5000" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange"> | 3 | + <!--swipers.length长度大于1的时候显示轮播--> |
| 4 | + <swipe v-show="swipers.length>1" class="swipe" :autoplay="5000" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange"> | ||
| 4 | <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index"> | 5 | <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index"> |
| 5 | <div class="item" @click="$parent.$parent.gotoDetail(item)"> | 6 | <div class="item" @click="$parent.$parent.gotoDetail(item)"> |
| 6 | <div class="img-box"> | 7 | <div class="img-box"> |
| @@ -9,6 +10,14 @@ | @@ -9,6 +10,14 @@ | ||
| 9 | </div> | 10 | </div> |
| 10 | </swipe-item> | 11 | </swipe-item> |
| 11 | </swipe> | 12 | </swipe> |
| 13 | + <!--swipers.length=1的时候--> | ||
| 14 | + <div v-show="swipers.length==1" class="swipe"> | ||
| 15 | + <div class="item" @click="$parent.$parent.gotoDetail(swipers[0])"> | ||
| 16 | + <div class="img-box"> | ||
| 17 | + <img v-lazy="swipers[0].simg + SIGN.BIG" class="img" mode="widthFix" /> | ||
| 18 | + </div> | ||
| 19 | + </div> | ||
| 20 | + </div> | ||
| 12 | </div> | 21 | </div> |
| 13 | </template> | 22 | </template> |
| 14 | 23 |