mini-refreshview

实例

使用方法

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

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

    {
     "usingComponents": {
     "refreshview": "mini-refreshview/refreshview",
     "refreshheader": "mini-refreshview/refreshheader",
     "refreshfooter": "mini-refreshview/refreshfooter"
     }
   }

3. 在布局中配置

   <refreshview id="refreshView"
               key="{{index}}"
               isRefresh="{{isRefresh}}"
               isLoadMore='{{isLoadMore}}'
               enableRefresh="{{enableRefresh}}"
               enableLoadMore="{{enableRefresh}}"
               bindonRefresh="onRefresh" 
               bindonLoadMore="onLoadMore">
       
       <refreshheader slot="header">
           <view style='background:#11f111;height:150rpx'>viewHeader</view>
       </refreshheader>
       
       <scroll-view slot="content" style='background:orange;'>
           <view wx:for='{{data}}' wx:key='{{index}}'>{{index}}</view>
       </scroll-view>
       
       <refreshfooter slot="footer">
           <view style="background:#33f111 ;height:150rpx">
               footer
           </view>
       </refreshfooter>
   
   </refreshview>
       

4. 属性

   • properties

     字段名|类型|必填|描述 :----:|:----:|:----:|:----: key|String|否|布局标记 isRefresh|Boolean|否|控制刷新状态 isLoadMore|Boolean|否|控制加载状态 enableRefresh|Boolean|否|是否开启刷新 enableLoadMore|Boolean|否|是否开启加载 bindonRefresh|Function|否|刷新状态回调({key}) bindonLoadMore|Function|否|加载状态回调({key})

   • slot

     名称|描述 :----:|:----: header| 刷新布局(必须为refreshheader) content|显示界面 footer| 加载布局(必须为refreshfooter)

测试

`npm run dev`

PS

若不可滑动,注意 Page 的 overflow:hidden