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 | 12 | .swipe-item { |
| 13 | 13 | width: 100%; |
| 14 | 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 | 16 | /deep/ .van-swipe__indicators { |
| 35 | 17 | left: unset; |
| ... | ... | @@ -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 | 1 | <template> |
| 2 | 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 | 5 | <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index"> |
| 5 | 6 | <div class="item" @click="$parent.$parent.gotoDetail(item)"> |
| 6 | 7 | <div class="img-box"> |
| ... | ... | @@ -9,6 +10,14 @@ |
| 9 | 10 | </div> |
| 10 | 11 | </swipe-item> |
| 11 | 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 | 21 | </div> |
| 13 | 22 | </template> |
| 14 | 23 | ... | ... |