w-front-end / select_good · Commits

Commit 85741afe7bc4b9fb2195f30bd3e863728f3b5ac9

Authored by zhiyangdu
1 parent 05d58419

根据list集合判断是否有禁止轮播滚动事件

Inline Side-by-side
Showing 2 changed files with 79 additions and 88 deletions
src/components/swiper/swiper.less
  View file @85741af
1 1 @charset "UTF-8";
2 2  
3 3 .swiper-box {
4   - position: relative;
5   - width: 750px;
6   - height: 380px;
7   - overflow: hidden;
8   - .swipe {
9   - margin: 0 auto;
10   - width: 690px;
11   - height: 100%;
12   - .swipe-item {
13   - width: 100%;
14   - height: 100%;
15   - }
16   - /deep/ .van-swipe__indicators {
17   - left: unset;
18   - right: 26px;
19   - bottom: 20px;
20   - .van-swipe__indicator {
21   - background-color: rgba(255, 255, 255, 0.5);
22   - width: 8px;
23   - height: 8px;
24   - margin: 0 4px;
25   - opacity: unset;
26   - border-radius: 50%;
27   - &.van-swipe__indicator--active {
28   - background:rgba(252,21,65,1);
29   - width: 16px;
30   - border-radius: 4px;
31   - }
32   - }
33   - }
34   - }
35   -}
36   -.item {
37   - display: flex;
38   - justify-content: center;
39   - align-items: center;
40   - width: 100%;
41   - height: 100%;
42   - border-radius: 16px;
  4 + position: relative;
  5 + width: 750px;
  6 + height: 380px;
43 7 overflow: hidden;
44   - .img-box {
45   - .img {
46   - display: block;
  8 + .swipe {
  9 + margin: 0 auto;
  10 + width: 690px;
  11 + height: 100%;
  12 + .swipe-item {
47 13 width: 100%;
48   - height: auto;
49   - border-radius: 16px;
50   - overflow: hidden;
  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 + }
  34 + /deep/ .van-swipe__indicators {
  35 + left: unset;
  36 + right: 26px;
  37 + bottom: 20px;
  38 + .van-swipe__indicator {
  39 + background-color: rgba(255, 255, 255, 0.5);
  40 + width: 8px;
  41 + height: 8px;
  42 + margin: 0 4px;
  43 + opacity: unset;
  44 + border-radius: 50%;
  45 + &.van-swipe__indicator--active {
  46 + background:rgba(252,21,65,1);
  47 + width: 16px;
  48 + border-radius: 4px;
  49 + }
  50 + }
51 51 }
52 52 }
53 53 }
... ...
src/components/swiper/swiper.vue
  View file @85741af
1 1 <template>
2   - <div class="swiper-box" v-if="swipers && swipers.length">
3   - <!--swipers.length长度大于1的时候显示轮播-->
4   - <swipe v-show="swipers.length>1" class="swipe" :autoplay="5000" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange">
5   - <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
6   - <div class="item" @click="$parent.$parent.gotoDetail(item)">
7   - <div class="img-box">
8   - <img v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
9   - </div>
10   - </div>
11   - </swipe-item>
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>
21   - </div>
  2 + <div class="swiper-box" v-if="swipers && swipers.length">
  3 + <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange">
  4 + <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="img-box">
  7 + <img v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
  8 + </div>
  9 + </div>
  10 + </swipe-item>
  11 + </swipe>
  12 + </div>
22 13 </template>
23 14  
24 15 <script>
25 16  
26   - // 引入组件
27   - // import { Swipe, SwipeItem } from 'mint-ui';
28   - import { Swipe, SwipeItem } from "vant";
  17 + // 引入组件
  18 + // import { Swipe, SwipeItem } from 'mint-ui';
  19 + import { Swipe, SwipeItem } from "vant";
29 20  
30   - export default {
31   - data() {
32   - return {
33   - showIndicators: true
34   - }
35   - },
36   - props: ["swipers"],
37   - components: {
38   - Swipe,
  21 + export default {
  22 + data() {
  23 + return {
  24 + showIndicators: true,
  25 + }
  26 + },
  27 + props: ["swipers"],
  28 + components: {
  29 + Swipe,
39 30 SwipeItem
40   - },
41   - methods: {
42   - /**
43   - * 当swiper切换
44   - * @param {int} index [切换swiper索引]
45   - */
46   - onChange(index) {
47   - this.$emit("onChange", index);
48   - }
49   - }
50   - }
  31 + },
  32 + methods: {
  33 + /**
  34 + * 当swiper切换
  35 + * @param {int} index [切换swiper索引]
  36 + */
  37 + onChange(index) {
  38 + this.$emit("onChange", index);
  39 + }
  40 + }
  41 + }
51 42 </script>
52 43  
53 44 <!-- Add "scoped" attribute to limit CSS to this component only -->
... ...