index.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="demo-swiper">
  3. <demo-block title="数量">
  4. <z-swiper v-model="list" :options="{slidesPerView : 2}">
  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="{slidesPerView : 'auto',centeredSlides: true,spaceBetween: 14}">
  12. <z-swiper-item v-for="(item,index) in list" :key="index" :custom-style="{width:'500rpx'}">
  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" :options="{slidesPerView : 2,centeredSlides : true}">
  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="list" :options="{slidesPerView : 3,centeredSlides : true,centeredSlidesBounds: true}">
  26. <z-swiper-item v-for="(item,index) in list" :key="index">
  27. <demo-item :item="item"></demo-item>
  28. </z-swiper-item>
  29. </z-swiper>
  30. </demo-block>
  31. <demo-block title="分组">
  32. <z-swiper v-model="list" :options="{slidesPerView : 3, slidesPerGroup : 3}">
  33. <z-swiper-item v-for="(item,index) in list" :key="index">
  34. <demo-item :item="item"></demo-item>
  35. </z-swiper-item>
  36. </z-swiper>
  37. </demo-block>
  38. <demo-block title="距离">
  39. <z-swiper v-model="list" :options="{slidesPerView : 3,spaceBetween : 20}">
  40. <z-swiper-item v-for="(item,index) in list" :key="index">
  41. <demo-item :item="item"></demo-item>
  42. </z-swiper-item>
  43. </z-swiper>
  44. </demo-block>
  45. </view>
  46. </template>
  47. <script>
  48. import data from '../../common/js/data.js'
  49. export default {
  50. data() {
  51. return {
  52. options: {
  53. direction: 'vertical'
  54. },
  55. list: data
  56. }
  57. }
  58. }
  59. </script>