mini-viewpager

使用方法

1. npm i mini-viewpager or yarn add mini-viewpager

2. 在Page的json文件内添加配置

    {
     "usingComponents": {
     "viewpager": "mini-viewpager/viewpager",
     "tabIndicator": "mini-viewpager/tabIndicator"
     }
   }

3. 在布局中配置

    <tabIndicator tab="{{tab}}" 
                     bind:onTabSelect='onTabSelect'
                     currentIndex="{{tabCurrentIndex}}">
                 
    </tabIndicator>
    <viewpager currentIndex="{{currentIndex}}" 
               count="{{tab.length}}" 
               onPagerChange="{{onPagerChange}}">
       <block wx:for="{{tab}}" wx:for-item="item" wx:key="{{index}}">
           <view slot="viewpager-{{index}}">{{item.name}}</view>
       </block>
    </viewpager>
   

4. 属性

   • properties

     字段名	类型	必填	描述
     tab	Array	是	tab显示的内容
     currentIndex	Number	是	当前需要显示的index
     count	Number	是	数量,与tab数量对应
     bind:onTabSelect	Function	否	状态回调
     onPagerChange	Function	否	状态回调

测试

`npm run dev`