index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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="listLoop" :options="optionsLoop">
  12. <z-swiper-item v-for="(item,index) in listLoop" :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="optionsFraction">
  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="optionsProgressbar">
  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="optionsDynamicBullets">
  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="optionsClickable">
  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. pagination: {
  54. el: true,
  55. },
  56. },
  57. optionsLoop: {
  58. pagination: {
  59. el: true,
  60. },
  61. loop: true
  62. },
  63. optionsFraction: {
  64. pagination: {
  65. el: true,
  66. type: 'fraction'
  67. },
  68. },
  69. optionsProgressbar: {
  70. pagination: {
  71. el: true,
  72. type: 'progressbar'
  73. },
  74. },
  75. optionsDynamicBullets: {
  76. pagination: {
  77. el: true,
  78. dynamicBullets: true,
  79. },
  80. },
  81. optionsClickable: {
  82. pagination: {
  83. el: true,
  84. clickable: true,
  85. },
  86. },
  87. list: data,
  88. listLoop: data
  89. }
  90. },
  91. }
  92. </script>