Blame view

components/silencc-msgbar/index.vue 1.2 KB
bb09ac81   wangming   DEV初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
  <template>
    <view class="swiper-wrapper">
      <view class="mask" />
      <swiper
        class="swiper"
        :style="{ width, height }"
        :indicator-dots="false"
        :autoplay="true"
        :interval="speed"
        :duration="speed"
        :circular="true"
        :vertical="true"
        :display-multiple-items="count"
        easing-function="linear"
      >
        <swiper-item v-for="item of list">
          <view class="swiper-item">
            <slot name="item" :data="item">
              {{ item }}
            </slot>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      speed: {
        type: Number,
        default: 2000 // ms
      },
      count: {
        type: Number,
        default: 5 // ms
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '500rpx'
      },
      list: {
        type: Array,
        default: () => []
      }
    }
  }
  </script>
  
  <style lang="scss" scope>
  .swiper-wrapper {
    position: relative;
    .swiper {
      width: 100%;
      height: 300rpx;
    }
    .mask {
      position: absolute;
      pointer-events: false;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 99;
    }
  }
  </style>