index.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="demo-swiper">
  3. <demo-block title="切换效果-3D翻转">
  4. <z-swiper v-model="list" :options="options">
  5. <z-swiper-item v-for="(item,index) in list" :key="index">
  6. <demo-item :item="item"></demo-item>
  7. </z-swiper-item>
  8. </z-swiper>
  9. </demo-block>
  10. <demo-block title="自动播放">
  11. <z-swiper v-model="list" :options="optionsAutoplay">
  12. <z-swiper-item v-for="(item,index) in list" :key="index">
  13. <demo-item :item="item"></demo-item>
  14. </z-swiper-item>
  15. </z-swiper>
  16. </demo-block>
  17. <demo-block title="纵向">
  18. <z-swiper v-model="list" :custom-style="{height:'300rpx'}" :options="optionsVertical">
  19. <z-swiper-item v-for="(item,index) in list" :key="index">
  20. <demo-item :item="item"></demo-item>
  21. </z-swiper-item>
  22. </z-swiper>
  23. </demo-block>
  24. <demo-block title="无限循环">
  25. <z-swiper v-model="loopList" :options="optionsLoop">
  26. <z-swiper-item v-for="(item,index) in loopList
  27. " :key="index">
  28. <demo-item :item="item"></demo-item>
  29. </z-swiper-item>
  30. </z-swiper>
  31. </demo-block>
  32. </view>
  33. </template>
  34. <script>
  35. import data from '../../common/js/data.js'
  36. export default {
  37. data() {
  38. return {
  39. options: {
  40. effect: 'flip'
  41. },
  42. optionsAutoplay: {
  43. effect: 'flip',
  44. autoplay: true
  45. },
  46. optionsVertical: {
  47. effect: 'flip',
  48. direction: 'vertical'
  49. },
  50. optionsLoop: {
  51. effect: 'flip',
  52. loop: true
  53. },
  54. list: data,
  55. loopList: data,
  56. }
  57. },
  58. }
  59. </script>