sw-swiper.vue 930 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <swiper class="swiper-box" :style="{'height': height + 'rpx'}" :interval="2000"
  3. :disable-touch="!list || list.length <= 1" circular :indicator-dots="list && list.length > 1"
  4. indicator-active-color="#fff">
  5. <swiper-item class="swiper-item" v-for="(item , index) in list" :key="index">
  6. <image :src="item" mode="aspectFill" :style="{'border-radius':borderRadius + 'rpx'}"></image>
  7. </swiper-item>
  8. </swiper>
  9. </template>
  10. <script>
  11. export default {
  12. name: "sw-swiper",
  13. props: {
  14. list: {
  15. type: Array,
  16. default: () => []
  17. },
  18. borderRadius: {
  19. type: Number,
  20. default: 0
  21. },
  22. height: {
  23. type: Number,
  24. default: 200
  25. }
  26. },
  27. data() {
  28. return {};
  29. },
  30. created() {
  31. },
  32. methods: {
  33. },
  34. }
  35. </script>
  36. <style lang="scss" scoped>
  37. .swiper-box {
  38. width: 100%;
  39. .swiper-item {
  40. width: 100%;
  41. height: 100%;
  42. image {
  43. width: 100%;
  44. height: 100%;
  45. }
  46. }
  47. }
  48. </style>