支付寶小程序其他手勢 分頁符·Pagination

分頁標(biāo)識(shí)符。

掃碼體驗(yàn)

示例代碼

{
 "defaultTitle": "Pagination",
 "usingComponents": {
   "pagination": "mini-ali-ui/es/pagination/index"
 }
}
<pagination pagerName='test1' infinite="true">
  <view style="display: flex;height: 100%;">
    <view style="text-align: center;padding-top: 20px;flex: 0 0 auto;width: 90vw;background-color: #f8d7d7;"><image src="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*whN9RZGSym8AAAAAAAAAAABkARQnAQ" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="width: 300rpx;height: 72rpx;" /></view>
    <view style="text-align: center;padding-top: 20px;flex: 0 0 auto;width: 90vw;background-color: #d5f7d5;"><image src="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*whN9RZGSym8AAAAAAAAAAABkARQnAQ" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="width: 300rpx;height: 72rpx;" /></view>
    <view style="text-align: center;padding-top: 20px;flex: 0 0 auto;width: 50vw;background-color: #f0e39e;"><image src="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ" rel="external nofollow"  rel="external nofollow"  style="width: 70px;height: 70px;"></view>
    <view style="text-align: center;padding-top: 20px;flex: 0 0 auto;width: 120vw;background-color: #F8F8F8;"><image src="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*whN9RZGSym8AAAAAAAAAAABkARQnAQ" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="width: 300rpx;height: 72rpx;" /></view>
    <view style="text-align: center;padding-top: 20px;flex: 0 0 auto;width: 20vw;background-color: #d3d3d3;"><image src="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ" rel="external nofollow"  rel="external nofollow"  style="width: 50px;height: 50px;"></view>
  </view>
</pagination>


<view style="width: 50vw;margin: 20px auto 0;background-color: #8f8f8f;">
  <pagination pagerName='test2' height="220rpx" white="true" infinite="true">
    <image src="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*whN9RZGSym8AAAAAAAAAAABkARQnAQ" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="width: 779rpx;height: 186rpx;margin: 10px 20px;" />
  </pagination>
</view>


<view style="margin-top: 20px;">正常翻頁樣式</view>
<view style="padding: 20px 20px 0;background-color: #f8f8ba;">
  <pagination currentPage="{{3}}" max="{{10}}" height="200px" />
</view>


<view style="margin-top: 20px;">反白翻頁樣式</view>
<view style="padding: 20px 20px 0;background-color: #0e98d8;">
  <pagination currentPage="{{5}}" white="true" />
</view>

屬性

Bug&Tip

• 分頁符組件共有兩種模式：無限滾動(dòng)模式和常規(guī)分頁符；
  • 無限滾動(dòng)模式 <pagination infinite="{{true}}"></pagination>；
  • 常規(guī)分頁符：<pagination />；
• 無限滾動(dòng)模式可通過 fillColor 和 frontColor 設(shè)置顏色；
• 常規(guī)分頁符可通過 frontColor 改變當(dāng)前頁 icon 顏色；
• 當(dāng) white 反白為 true 時(shí)，不可再修改顏色；
• 無限滾動(dòng)模式是雙標(biāo)簽形式包含內(nèi)容，可通過 height 設(shè)置容器高度；
• 如一個(gè)頁面中存在多個(gè)無限滾動(dòng)分頁符，建議設(shè)置 pagerName，避免分頁效果顯示錯(cuò)誤；