swiper.vue 902 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <gracePage :customHeader="false">
  3. <view class="container" slot="gBody">
  4. <dever-swiper class="swiper" @change="change" :current="current" :circular="circular" :item="data" v-slot="{item}">
  5. <view>{{item}}</view>
  6. </dever-swiper>
  7. </view>
  8. </gracePage>
  9. </template>
  10. <script>
  11. import deverSwiper from '@/lib/dever/components/swiper.vue';
  12. export default {
  13. data() {
  14. return {
  15. current : 0,
  16. circular : true,
  17. data : [1, 2, 3, 4, 5, 6, 7] // 数据列表
  18. }
  19. },
  20. onLoad() {
  21. },
  22. methods: {
  23. change : function(cur, index) {
  24. console.info(cur, index);
  25. }
  26. },
  27. components:{
  28. deverSwiper
  29. }
  30. }
  31. </script>
  32. <style lang="scss" scoped>
  33. page {
  34. max-height: 100%;
  35. }
  36. .swiper {
  37. width: 750rpx;
  38. height: 100%;
  39. }
  40. swiper-item>view{
  41. height: 100%;
  42. }
  43. swiper-item image{
  44. width: 750rpx;
  45. height: 100%;
  46. }
  47. </style>