index.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view class="demo-swiper">
  3. <demo-block title="基础用法">
  4. <z-swiper v-model="list" :options="{autoplay:true}">
  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="{ autoplay: {delay: 1000}}">
  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" :options="{ autoplay: {stopOnLastSlide: 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="loopList" :options="{ autoplay:true,loop:true}">
  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. <demo-block title="反向">
  32. <z-swiper v-model="list" :options="{ autoplay: {reverseDirection: true}}">
  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. </view>
  39. </template>
  40. <script>
  41. import data from '../../common/js/data.js'
  42. export default {
  43. data() {
  44. return {
  45. list: data,
  46. loopList: data,
  47. }
  48. }
  49. }
  50. </script>