index.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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="list" :options="optionsHide">
  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="optionsDraggable">
  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. options: {
  46. scrollbar: {
  47. el: true
  48. },
  49. },
  50. optionsAutoplay: {
  51. scrollbar: {
  52. el: true
  53. },
  54. autoplay: true
  55. },
  56. optionsVertical: {
  57. scrollbar: {
  58. el: true
  59. },
  60. direction: 'vertical'
  61. },
  62. optionsHide: {
  63. scrollbar: {
  64. el: true,
  65. hide: true,
  66. },
  67. },
  68. optionsDraggable: {
  69. scrollbar: {
  70. el: true,
  71. draggable: true,
  72. },
  73. },
  74. list: data,
  75. }
  76. },
  77. }
  78. </script>