mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[improvement] LoadMore: 优化组件表现及展示效果 (#337)
* fix: loadmore组件 * fix: loadmore文档完善 * fix: loadmore组件完善 * fix: loadmore MD更新
This commit is contained in:
zgrong
Yao
parent
024fee9186
commit
eff6b8ff30
@ -27,7 +27,8 @@
|
||||
"pages/toast/index",
|
||||
"pages/tree-select/index",
|
||||
"pages/select/index",
|
||||
"pages/datetime/index"
|
||||
"pages/datetime/index",
|
||||
"pages/loadmore/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarBackgroundColor": "#FAFAFA",
|
||||
|
||||
@ -62,6 +62,9 @@ export default {
|
||||
}, {
|
||||
name: 'Tag 标记',
|
||||
path: '/pages/tag/index'
|
||||
}, {
|
||||
name: 'Loadmore 加载更多',
|
||||
path: '/pages/loadmore/index'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
8
example/pages/loadmore/index.json
Normal file
8
example/pages/loadmore/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "loadmore 加载",
|
||||
"usingComponents": {
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-loadmore": "../../dist/loadmore/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
11
example/pages/loadmore/index.wxml
Normal file
11
example/pages/loadmore/index.wxml
Normal file
@ -0,0 +1,11 @@
|
||||
<doc-page title="LOADMORE" without-padding>
|
||||
<zan-panel title="nodata">
|
||||
<zan-loadmore type="text"></zan-loadmore>
|
||||
</zan-panel>
|
||||
<zan-panel title="loading">
|
||||
<zan-loadmore type="loading"></zan-loadmore>
|
||||
</zan-panel>
|
||||
<zan-panel title="text">
|
||||
<zan-loadmore type="text" text="暂无数据"></zan-loadmore>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
5
example/pages/loadmore/index.wxss
Normal file
5
example/pages/loadmore/index.wxss
Normal file
@ -0,0 +1,5 @@
|
||||
|
||||
|
||||
zan-loadmore {
|
||||
margin: 15px;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"navigationBarTitleText": "Loadmore 加载"
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
<import src="/dist/loadmore/index.wxml" />
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">LOADMORE</view>
|
||||
|
||||
<template is="zan-loadmore" data="{{ loading: true }}" />
|
||||
<template is="zan-loadmore" data="{{ nodata: true }}" />
|
||||
<template is="zan-loadmore" data="{{ nomore: true }}" />
|
||||
</view>
|
||||
@ -1,26 +1,26 @@
|
||||
## Loadmore 加载
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
...
|
||||
"usingComponents": {
|
||||
"zan-loadmore": "../../dist/loadmore/index"
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
在需要使用的页面里引入组件库模板
|
||||
在页面上直接使用 zan-loadmore 标签即可
|
||||
```html
|
||||
<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
|
||||
|
||||
<!-- 直接使用 zan-loadmore 模板，并且直接传入设置值 -->
|
||||
<template is="zan-loadmore" data="{{ loading: true }}"></template>
|
||||
<zan-loadmore type="text"></zan-loadmore>
|
||||
<zan-loadmore type="loading"></zan-loadmore>
|
||||
<zan-loadmore type="text" text="暂无数据"></zan-loadmore>
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
`loadmore` 支持三种状态，loading, nodata, nomore。传入指定的值即可显示
|
||||
```html
|
||||
<!-- 加载更多 -->
|
||||
<template is="zan-loadmore" data="{{ loading: true }}"></template>
|
||||
<!-- 没有可以显示的数据 -->
|
||||
<template is="zan-loadmore" data="{{ nodata: true }}"></template>
|
||||
<!-- 没有更多的数据了 -->
|
||||
<template is="zan-loadmore" data="{{ nomore: true }}"></template>
|
||||
```
|
||||
### 具体参数
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
| ------- | --------------- | -------- | ----- | ----------------- |
|
||||
| type | String | 是 | loading | 可选`loading`, `text` |
|
||||
| text | String | 否 | 暂无数据 | 文案 |
|
||||
|
||||
12
packages/loadmore/index.js
Normal file
12
packages/loadmore/index.js
Normal file
@ -0,0 +1,12 @@
|
||||
Component({
|
||||
properties: {
|
||||
type: {
|
||||
type: String,
|
||||
value: 'loading'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
});
|
||||
3
packages/loadmore/index.json
Normal file
3
packages/loadmore/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@ -1,12 +1,36 @@
|
||||
@import "../common/_mixins";
|
||||
|
||||
.zan-loadmore {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.zan-loadmore__line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
position: relative;
|
||||
width: 65%;
|
||||
margin: 21px auto;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
@mixin hairline;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-loadmore__text, .zan-loadmore__dot {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.zan-loadmore__dot {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #E5E5E5;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -21,58 +45,9 @@
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.zan-loadmore .zan-loading {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.zan-loadmore__tips {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.zan-loadmore--nodata,
|
||||
.zan-loadmore--nomore {
|
||||
color: #999;
|
||||
|
||||
&::after {
|
||||
@mixin hairline;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-loadmore--nodata {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.zan-loadmore--nodata .zan-loadmore__tips {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
background: #f9f9f9;
|
||||
padding: 0 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zan-loadmore--nomore .zan-loadmore__tips {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
background: #f9f9f9;
|
||||
padding: 0 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zan-loadmore__dot {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
margin-left: -2px;
|
||||
margin-top: -2px;
|
||||
content: " ";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #E5E5E5;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@ -1,24 +1,12 @@
|
||||
<template name="zan-loadmore">
|
||||
|
||||
<block wx:if="{{nomore}}">
|
||||
<view class="zan-loadmore zan-loadmore--nomore">
|
||||
<view class="zan-loadmore__tips">
|
||||
<view class="zan-loadmore__dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zan-loadmore">
|
||||
<block wx:if="{{ type === 'loading' }}">
|
||||
<view class="zan-loading"></view>
|
||||
<view class="zan-loadmore__tips">加载中...</view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{nodata}}">
|
||||
<view class="zan-loadmore zan-loadmore--nodata">
|
||||
<view class="zan-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
|
||||
</view>
|
||||
<block wx:elif="{{ type === 'text' }}">
|
||||
<view class="zan-loadmore__line"></view>
|
||||
<text wx:if="{{ text }}" class="zan-loadmore__text">{{ text }}</text>
|
||||
<view wx:else class="zan-loadmore__dot"></view>
|
||||
<view class="zan-loadmore__line"></view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{loading}}">
|
||||
<view class="zan-loadmore">
|
||||
<view class="zan-loading"></view>
|
||||
<view class="zan-loadmore__tips">加载中...</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</template>
|
||||
</view>
|
||||
Loading…
x
Reference in New Issue
Block a user