index.wxml 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Pagination</view>
  4. <view class="page__desc">分页器</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">Button with text</view>
  8. <wux-pagination defaultCurrent="1" total="5" bind:prev="onPrev" bind:next="onNext">
  9. <view slot="prev">Prev</view>
  10. <view slot="next">Next</view>
  11. </wux-pagination>
  12. <view class="sub-title">Controlled</view>
  13. <wux-pagination current="{{ current }}" total="5" mode="button" controlled bind:change="onChange">
  14. <view slot="prev">Prev</view>
  15. <view slot="next">Next</view>
  16. </wux-pagination>
  17. <view class="sub-title">Hide number</view>
  18. <wux-pagination defaultCurrent="1" total="5" simple>
  19. <view slot="prev">Prev</view>
  20. <view slot="next">Next</view>
  21. </wux-pagination>
  22. <view class="sub-title">Show number only</view>
  23. <wux-pagination defaultCurrent="1" total="5" mode="number" />
  24. <view class="sub-title">Point style</view>
  25. <wux-pagination defaultCurrent="1" total="5" mode="pointer" />
  26. <view class="sub-title">With swiper</view>
  27. <view class="swiper">
  28. <swiper style="height: 256px;" current="{{ swiperCurrent }}" bindchange="onSwiperChange">
  29. <block wx:for="{{ 5 }}" wx:key="index">
  30. <swiper-item>
  31. <image style="width: 100%; height: 100%;" mode="aspectFill" src="{{ 'https://picsum.photos/750/750/?random&s=' + item }}"></image>
  32. </swiper-item>
  33. </block>
  34. </swiper>
  35. <view class="swiper__pagination">
  36. <wux-pagination controlled current="{{ swiperCurrent + 1 }}" total="5" mode="number" />
  37. </view>
  38. </view>
  39. </view>
  40. </view>