index.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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="loopList" :options="optionsLoop">
  19. <z-swiper-item v-for="(item,index) in loopList
  20. " :key="index">
  21. <demo-item :item="item"></demo-item>
  22. </z-swiper-item>
  23. </z-swiper>
  24. </demo-block>
  25. </view>
  26. </template>
  27. <script>
  28. import data from '../../common/js/data.js'
  29. export default {
  30. data() {
  31. return {
  32. options: {
  33. effect: 'panorama',
  34. slidesPerView: 1.5,
  35. centeredSlides: true,
  36. panorama: {
  37. depth: 150,
  38. rotate: 45,
  39. },
  40. },
  41. optionsAutoplay: {
  42. effect: 'panorama',
  43. slidesPerView: 1.5,
  44. centeredSlides: true,
  45. panorama: {
  46. depth: 150,
  47. rotate: 45,
  48. },
  49. autoplay: true
  50. },
  51. optionsLoop: {
  52. effect: 'panorama',
  53. slidesPerView: 1.5,
  54. centeredSlides: true,
  55. loopedSlides: 2,
  56. panorama: {
  57. depth: 150,
  58. rotate: 45,
  59. },
  60. loop: true
  61. },
  62. list: data,
  63. loopList: data
  64. }
  65. },
  66. }
  67. </script>