<view class="page">
    <view class="page__hd">
        <view class="page__title">Pagination</view>
        <view class="page__desc">分页器</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="sub-title">Button with text</view>
        <wux-pagination defaultCurrent="1" total="5" bind:prev="onPrev" bind:next="onNext">
            <view slot="prev">Prev</view>
            <view slot="next">Next</view>
        </wux-pagination>
        <view class="sub-title">Controlled</view>
        <wux-pagination current="{{ current }}" total="5" mode="button" controlled bind:change="onChange">
            <view slot="prev">Prev</view>
            <view slot="next">Next</view>
        </wux-pagination>
        <view class="sub-title">Hide number</view>
        <wux-pagination defaultCurrent="1" total="5" simple>
            <view slot="prev">Prev</view>
            <view slot="next">Next</view>
        </wux-pagination>
        <view class="sub-title">Show number only</view>
        <wux-pagination defaultCurrent="1" total="5" mode="number" />
        <view class="sub-title">Point style</view>
        <wux-pagination defaultCurrent="1" total="5" mode="pointer" />
        <view class="sub-title">With swiper</view>
        <view class="swiper">
          <swiper style="height: 256px;" current="{{ swiperCurrent }}" bindchange="onSwiperChange">
              <block wx:for="{{ 5 }}" wx:key="index">
                  <swiper-item>
                      <image style="width: 100%; height: 100%;" mode="aspectFill" src="{{ 'https://picsum.photos/750/750/?random&s=' + item }}"></image>
                  </swiper-item>
              </block>
          </swiper>
          <view class="swiper__pagination">
            <wux-pagination controlled current="{{ swiperCurrent + 1 }}" total="5" mode="number" />
          </view>
        </view>
    </view>
</view>
