1.0.1 • Published 3 years ago
kw-layout
开发
npm install
npm run dev
npm run watch
npm run clean
npm run clean-dev
布局组件文档
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|---|
| loading | Boolean | 否 | false | 导航loading |
| showNav | Boolean | 否 | true | 是否显示导航 |
| title | String | 否 | | 导航标题 |
| back | Boolean | 否 | false | 是否显示返回按钮 |
| color | String | 否 | #fff | 文字及icon颜色 |
| background | String | 否 | linear-gradient(90deg, #1AD384 0%, #2CB369 100%) | 导航背景色 |
| delta | Number | 否 | 1 | 返回的页面层级数 |
| loadMore | Boolean | 否 | false | 是否开启触底加载 |
| loadMoreState | String | 否 | default | 触底加载状态（可选值：loading，noMore） |
| onLoadMore | Function | 否 | | 触底加载方法 |
| refresh | Boolean | 否 | false | 是否开启下拉刷新 |
| refreshState | Boolean | 否 | false | 设置当前刷新状态 |
| onRefresh | Function | 否 | | 下拉刷新方法 |
| pageLoading | Boolean | 否 | false | 是否开启整页loading |
slot
| 名称 | 描述 |
|---|
| - | 页面内容 |
| nav-left | 导航左侧icon，back属性为false时生效 |
| nav-center | 导航标题，title属性为空时生效 |
| nav-right | 在导航右侧显示 |
| footer | 底部区域 |
示例
<kw-layout refresh bind:onRefresh="onRefresh" loadMore="{{true}}" loadMoreState="{{loadMoreState}}" refreshState="{{refreshState}}" title="DEMO" bind:onLoadMore="onLoadMore" page-loading="{{pageLoading}}">
<block wx:for="{{num}}" wx:key="*this">
<view style="height:100rpx;line-height:100rpx;text-align:center;">{{item}}</view>
</block>
</kw-layout>