swiper.wxml 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3. <view class="container page" data-weui-theme="{{theme}}">
  4. <template is="head" data="{{title: 'swiper'}}"/>
  5. <view class="page-body">
  6. <view class="page-section page-section-spacing swiper">
  7. <swiper indicator-dots="{{indicatorDots}}"
  8. autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  9. <block wx:for="{{background}}" wx:key="*this">
  10. <swiper-item>
  11. <view class="swiper-item {{item}}"></view>
  12. </swiper-item>
  13. </block>
  14. </swiper>
  15. </view>
  16. <view class="page-section" style="margin-top: 20px;margin-bottom: 0;">
  17. <view class="weui-cells weui-cells_after-title">
  18. <view class="weui-cell weui-cell_switch">
  19. <view class="weui-cell__bd">指示点</view>
  20. <view class="weui-cell__ft">
  21. <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
  22. </view>
  23. </view>
  24. <view class="weui-cell weui-cell_switch">
  25. <view class="weui-cell__bd">自动播放</view>
  26. <view class="weui-cell__ft">
  27. <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="page-section page-section-spacing">
  33. <view class="page-section-title">
  34. <text>幻灯片切换时长(ms)</text>
  35. <text class="info">{{duration}}</text>
  36. </view>
  37. <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
  38. <view class="page-section-title">
  39. <text>自动播放间隔时长(ms)</text>
  40. <text class="info">{{interval}}</text>
  41. </view>
  42. <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
  43. </view>
  44. </view>
  45. <template is="foot" />
  46. </view>