Skip to content

Commit db75d7d

Browse files
wppengChaunjie
wppeng
authored and
Chaunjie
committed
update swipeout
1 parent 2f37acc commit db75d7d

File tree

7 files changed

+136
-99
lines changed

7 files changed

+136
-99
lines changed

‎docs/md/components.md

Lines changed: 103 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1060,86 +1060,6 @@ export default class Helper extends wepy.page {
10601060
</script>
10611061
```
10621062

1063-
#### Rate 星级评分
1064-
1065-
- **概述**
1066-
1067-
&emsp;&emsp;星级评分
1068-
1069-
- **使用指南**
1070-
1071-
&emsp;&emsp;页面中引入组件
1072-
```javascript
1073-
import Rate from 'kai-ui/Rate'
1074-
```
1075-
1076-
&emsp;&emsp;组件添加
1077-
```javascript
1078-
components = {
1079-
rate: Rate
1080-
}
1081-
```
1082-
1083-
&emsp;&emsp;template添加
1084-
```template
1085-
<template>
1086-
  <rate title="物流服务" :value.sync="value" :desc="desc"/>
1087-
</template>
1088-
```
1089-
1090-
&emsp;&emsp;对应参数：
1091-
1092-
| 参数 | 类型 | 是否必传 | 可选项 | 默认 | 描述 |
1093-
| --- | --- | --- | --- | --- | --- | --- |
1094-
| title | `String` | 是 | - | - | 评分标题 |
1095-
| value | `Number` | 是 | 0，1，2，3，4，5 | - | 评分 |
1096-
| desc | `Array` | 否 | - | ['1星','2星','3星','4星','5星'] | 评分描述 |
1097-
| type | `String` | 否 | `vertical`,`horizontal` | `horizontal` | 布局 |
1098-
1099-
&emsp;&emsp;案例
1100-
```wpy
1101-
<template>
1102-
<view class="kai-content">
1103-
<view class="padding-10">
1104-
<view class="font-12">基础用法:</view>
1105-
<rate1 title="描述相符" :value.sync="value1"/>
1106-
</view>
1107-
<view class="padding-10">
1108-
<view class="font-12">自定义评分描述:</view>
1109-
<rate2 title="物流服务" :value.sync="value2" :desc="desc"/>
1110-
</view>
1111-
<view class="padding-10">
1112-
<view class="font-12">竖向布局:</view>
1113-
<rate3 title="这是一个比较长的标题信息" :value.sync="value3" type="vertical"/>
1114-
</view>
1115-
</view>
1116-
</template>
1117-
1118-
<script>
1119-
import wepy from 'wepy'
1120-
import Rate from 'kai-ui/Rate'
1121-
1122-
export default class RatePage extends wepy.page {
1123-
data = {
1124-
value1: 4,
1125-
value2: 1,
1126-
value3: 2,
1127-
desc: [
1128-
'非常差',
1129-
'差',
1130-
'一般',
1131-
'好',
1132-
'非常好'
1133-
]
1134-
}
1135-
components = {
1136-
rate1: Rate,
1137-
rate2: Rate,
1138-
rate3: Rate
1139-
}
1140-
}
1141-
</script>
1142-
```
11431063

11441064
### 导航组件
11451065

@@ -2152,8 +2072,8 @@ components = {
21522072
<template>
21532073
<view class="kai-content">
21542074
<view class="padding-10 font-12">
2155-
<view class="padding-10 font-12">示例：</view>
2156-
<swipeout componentId="0">
2075+
<view class="padding-10">基础用法：</view>
2076+
<swipeout1 componentId="0">
21572077
<view slot="content">
21582078
<view class="text">
21592079
<view>向左滑动试试：）</view>
@@ -2166,7 +2086,21 @@ components = {
21662086
<view class="action-btn btn1">移入收藏夹</view>
21672087
<view class="action-btn btn2">删除</view>
21682088
</view>
2169-
</swipeout>
2089+
</swipeout1>
2090+
<view class="padding-10"></view>
2091+
<swipeout2 componentId="1">
2092+
<view slot="content">
2093+
<view class="text">
2094+
<view>向左滑动试试：）</view>
2095+
忆江南，江南好，风景旧曾谙，日出江花红胜火，春来江水绿如蓝，能不忆江南。
2096+
</view>
2097+
</view>
2098+
<view slot="action">
2099+
<view class="action-btn btn0">找相似</view>
2100+
<view class="action-btn btn1">移入收藏夹</view>
2101+
<view class="action-btn btn2">删除</view>
2102+
</view>
2103+
</swipeout2>
21702104
</view>
21712105
</view>
21722106
</template>
@@ -2177,15 +2111,15 @@ import Swipeout from 'kai-ui/Swipeout'
21772111
21782112
export default class SwipeoutPage extends wepy.page {
21792113
components = {
2180-
swipeout: Swipeout
2114+
swipeout1: Swipeout,
2115+
swipeout2: Swipeout
21812116
}
21822117
}
21832118
</script>
21842119
21852120
<style lang="less">
21862121
.text {
21872122
padding: 10px;
2188-
height: 100px;
21892123
}
21902124
.action-btn {
21912125
display: flex;
@@ -2203,6 +2137,9 @@ export default class SwipeoutPage extends wepy.page {
22032137
.btn2 {
22042138
background: #ccc;
22052139
}
2140+
.btn0 {
2141+
background: #f80;
2142+
}
22062143
</style>
22072144
```
22082145

@@ -3297,6 +3234,87 @@ export default class RatePage extends wepy.page {
32973234
</script>
32983235
```
32993236
3237+
#### Rate 星级评分
3238+
3239+
- **概述**
3240+
3241+
&emsp;&emsp;星级评分
3242+
3243+
- **使用指南**
3244+
3245+
&emsp;&emsp;页面中引入组件
3246+
```javascript
3247+
import Rate from 'kai-ui/Rate'
3248+
```
3249+
3250+
&emsp;&emsp;组件添加
3251+
```javascript
3252+
components = {
3253+
rate: Rate
3254+
}
3255+
```
3256+
3257+
&emsp;&emsp;template添加
3258+
```template
3259+
<template>
3260+
  <rate title="物流服务" :value.sync="value" :desc="desc"/>
3261+
</template>
3262+
```
3263+
3264+
&emsp;&emsp;对应参数：
3265+
3266+
| 参数 | 类型 | 是否必传 | 可选项 | 默认 | 描述 |
3267+
| --- | --- | --- | --- | --- | --- | --- |
3268+
| title | `String` | 是 | - | - | 评分标题 |
3269+
| value | `Number` | 是 | 0，1，2，3，4，5 | - | 评分 |
3270+
| desc | `Array` | 否 | - | ['1星','2星','3星','4星','5星'] | 评分描述 |
3271+
| type | `String` | 否 | `vertical`,`horizontal` | `horizontal` | 布局 |
3272+
3273+
&emsp;&emsp;案例
3274+
```wpy
3275+
<template>
3276+
<view class="kai-content">
3277+
<view class="padding-10">
3278+
<view class="font-12">基础用法:</view>
3279+
<rate1 title="描述相符" :value.sync="value1"/>
3280+
</view>
3281+
<view class="padding-10">
3282+
<view class="font-12">自定义评分描述:</view>
3283+
<rate2 title="物流服务" :value.sync="value2" :desc="desc"/>
3284+
</view>
3285+
<view class="padding-10">
3286+
<view class="font-12">竖向布局:</view>
3287+
<rate3 title="这是一个比较长的标题信息" :value.sync="value3" type="vertical"/>
3288+
</view>
3289+
</view>
3290+
</template>
3291+
3292+
<script>
3293+
import wepy from 'wepy'
3294+
import Rate from 'kai-ui/Rate'
3295+
3296+
export default class RatePage extends wepy.page {
3297+
data = {
3298+
value1: 4,
3299+
value2: 1,
3300+
value3: 2,
3301+
desc: [
3302+
'非常差',
3303+
'差',
3304+
'一般',
3305+
'好',
3306+
'非常好'
3307+
]
3308+
}
3309+
components = {
3310+
rate1: Rate,
3311+
rate2: Rate,
3312+
rate3: Rate
3313+
}
3314+
}
3315+
</script>
3316+
```
3317+
33003318
### 搜索组件
33013319
33023320
#### Searchbar 搜索框

‎src/components/swipeout/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
display: flex;
33
position: relative;
44
overflow: hidden;
5+
background: #efefef;
56
.swipeout-content {
67
z-index: 2;
78
width:100%;

‎src/components/swipeout/index.wpy

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
const offsetX = endX - this.startX
4343
// 左移
4444
if (offsetX < 0) {
45-
this.left = Math.max(offsetX, -this.width)
45+
this.left = offsetX
4646
}
4747
// 右移
4848
if (offsetX > 0) {

‎src/pages/folder.wpy

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<view class="kai-content">
33
<view class="padding-10">
4+
<view class="padding-10 font-12">基础用法：</view>
45
<folder1 title="会员信息" componentId="0">
56
<view slot="content">
67
<view>客户来源：微信公众号</view>

‎src/pages/index.wpy

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,11 +122,6 @@ export default class Index extends wepy.page {
122122
title: 'Helper 基础样式',
123123
linktype: 1,
124124
link: 'helper'
125-
},
126-
{
127-
title: 'Rate 星级评分',
128-
linktype: 1,
129-
link: 'rate'
130125
}
131126
]
132127
},
@@ -227,6 +222,11 @@ export default class Index extends wepy.page {
227222
title: 'Slider 滑块',
228223
linktype: 1,
229224
link: 'slider'
225+
},
226+
{
227+
title: 'Rate 星级评分',
228+
linktype: 1,
229+
link: 'rate'
230230
}
231231
]
232232
},

‎src/pages/rate.wpy

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<view class="kai-content">
33
<view class="padding-10">
4-
<view class="font-12">基础用法:</view>
4+
<view class="padding-10 font-12">基础用法:</view>
55
<rate1 title="描述相符" :value.sync="value1"/>
66
</view>
77
<view class="padding-10">
8-
<view class="font-12">自定义评分描述:</view>
8+
<view class="padding-10 font-12">自定义评分描述:</view>
99
<rate2 title="物流服务" :value.sync="value2" :desc="desc"/>
1010
</view>
1111
<view class="padding-10">
12-
<view class="font-12">竖向布局:</view>
12+
<view class="padding-10 font-12">竖向布局:</view>
1313
<rate3 title="这是一个比较长的标题信息" :value.sync="value3" type="vertical"/>
1414
</view>
1515
</view>

‎src/pages/swipeout.wpy

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<view class="kai-content">
33
<view class="padding-10 font-12">
4-
<view class="padding-10 font-12">示例：</view>
5-
<swipeout componentId="0">
4+
<view class="padding-10">基础用法：</view>
5+
<swipeout1 componentId="0">
66
<view slot="content">
77
<view class="text">
88
<view>向左滑动试试：）</view>
@@ -15,7 +15,21 @@
1515
<view class="action-btn btn1">移入收藏夹</view>
1616
<view class="action-btn btn2">删除</view>
1717
</view>
18-
</swipeout>
18+
</swipeout1>
19+
<view class="padding-10"></view>
20+
<swipeout2 componentId="1">
21+
<view slot="content">
22+
<view class="text">
23+
<view>向左滑动试试：）</view>
24+
忆江南，江南好，风景旧曾谙，日出江花红胜火，春来江水绿如蓝，能不忆江南。
25+
</view>
26+
</view>
27+
<view slot="action">
28+
<view class="action-btn btn0">找相似</view>
29+
<view class="action-btn btn1">移入收藏夹</view>
30+
<view class="action-btn btn2">删除</view>
31+
</view>
32+
</swipeout2>
1933
</view>
2034
</view>
2135
</template>
@@ -30,15 +44,15 @@ export default class SwipeoutPage extends wepy.page {
3044
}
3145

3246
components = {
33-
swipeout: Swipeout
47+
swipeout1: Swipeout,
48+
swipeout2: Swipeout
3449
}
3550
}
3651
</script>
3752

3853
<style lang="less">
3954
.text {
4055
padding: 10px;
41-
height: 100px;
4256
}
4357
.action-btn {
4458
display: flex;
@@ -56,4 +70,7 @@ export default class SwipeoutPage extends wepy.page {
5670
.btn2 {
5771
background: #ccc;
5872
}
73+
.btn0 {
74+
background: #f80;
75+
}
5976
</style>

0 commit comments

Comments
 (0)