home-swipers.vue 939 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <swiper :style="getStyle" indicator-dots :interval="3000" :duration="1000" autoplay circular indicator-color='#fff'>
  3. <swiper-item @tap="jump(item, index)" v-for="(item, index) in swipers" :key='index'>
  4. <view>
  5. <image class="img" :style="getStyle" :src="item.src" lazy-load mode=""></image>
  6. </view>
  7. </swiper-item>
  8. </swiper>
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. swipers: {
  14. type: Array,
  15. default: () => []
  16. },
  17. heights: {
  18. type: String,
  19. default: '280'
  20. },
  21. // 判断点击是预览还是其他 默认 false
  22. proview: {
  23. type: Boolean,
  24. default: false
  25. }
  26. },
  27. computed: {
  28. getStyle() {
  29. return `height: ${this.heights}rpx`
  30. }
  31. },
  32. mounted() {},
  33. methods: {
  34. jump(item, index) {
  35. if (this.proview) {
  36. console.log('预览');
  37. } else {
  38. this.$emit('jump', item)
  39. }
  40. }
  41. }
  42. }
  43. </script>
  44. <style scoped>
  45. .img {
  46. width: 750rpx;
  47. }
  48. </style>