index.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="demo-swiper">
  3. <demo-block title="基础用法">
  4. <z-swiper v-model="list">
  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" ref="zSwiper" @slideChange="onChange">
  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="options">
  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="{speed:2000}">
  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="{enabled:false}">
  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="{autoHeight:true}">
  40. <z-swiper-item>
  41. <demo-item :item="list[0]" height="200rpx"></demo-item>
  42. </z-swiper-item>
  43. <z-swiper-item>
  44. <demo-item :item="list[1]" height="400rpx"></demo-item>
  45. </z-swiper-item>
  46. <z-swiper-item>
  47. <demo-item :item="list[2]" height="500rpx"></demo-item>
  48. </z-swiper-item>
  49. <z-swiper-item>
  50. <demo-item :item="list[3]" height="300rpx"></demo-item>
  51. </z-swiper-item>
  52. <z-swiper-item>
  53. <demo-item :item="list[4]" height="100rpx"></demo-item>
  54. </z-swiper-item>
  55. </z-swiper>
  56. </demo-block>
  57. </view>
  58. </template>
  59. <script>
  60. import data from '../../common/js/data.js'
  61. export default {
  62. data() {
  63. return {
  64. list: data,
  65. options: {
  66. direction: 'vertical',
  67. bubbling: false
  68. }
  69. }
  70. },
  71. methods: {
  72. onChange(swiper, index) {
  73. uni.showToast({
  74. title: '当前 swiper 索引:' + this.$refs.zSwiper.swiper.activeIndex,
  75. icon: 'none'
  76. })
  77. }
  78. }
  79. }
  80. </script>