index.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="demo-swiper">
  3. <demo-block title="切换效果-方块">
  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" :key="index">
  27. <demo-item :item="item"></demo-item>
  28. </z-swiper-item>
  29. </z-swiper>
  30. </demo-block>
  31. </view>
  32. </template>
  33. <script>
  34. import data from '../../common/js/data.js'
  35. export default {
  36. data() {
  37. return {
  38. options: {
  39. effect: 'cube',
  40. cubeEffect: {
  41. shadow: true,
  42. slideShadows: true,
  43. shadowOffset: 20,
  44. shadowScale: 0.94,
  45. },
  46. },
  47. optionsAutoplay: {
  48. effect: 'cube',
  49. cubeEffect: {
  50. shadow: true,
  51. slideShadows: true,
  52. shadowOffset: 20,
  53. shadowScale: 0.94,
  54. },
  55. autoplay: true
  56. },
  57. optionsVertical: {
  58. effect: 'cube',
  59. cubeEffect: {
  60. shadow: true,
  61. slideShadows: true,
  62. shadowOffset: 20,
  63. shadowScale: 0.94,
  64. },
  65. direction: 'vertical'
  66. },
  67. optionsLoop: {
  68. effect: 'cube',
  69. cubeEffect: {
  70. shadow: true,
  71. slideShadows: true,
  72. shadowOffset: 20,
  73. shadowScale: 0.94,
  74. },
  75. loop: true
  76. },
  77. list: data,
  78. loopList: data,
  79. }
  80. },
  81. }
  82. </script>