Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/swipe actipn case #446

Merged
merged 7 commits into from
Dec 17, 2022
Merged

Feat/swipe actipn case #446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e7f3bfe
feat: 调整swipe-action示例
Dec 12, 2022
df69d77
feat: 初始化swipe-action
Dec 12, 2022
3cf5d8a
feat: 增加swipe-action实例
Dec 13, 2022
07e49c0
feat: 新增示例
Dec 16, 2022
88a9ed6
feat: 新增swipe-action 的示例
Dec 16, 2022
6053935
feat: 增加swipe action 示例
Dec 16, 2022
249f321
feat: 修改.md 文件中的默认滑动速度
Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion demo/app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@
"pages": [
"pages/index/index",
"pages/IndexBar/index",
"pages/SwipeActionLeftRight/index",
"pages/SwipeActionMove/index",
"pages/SwipeActionTap/index",
"pages/SwipeActionSpeed/index",
"pages/SwipeActionWidth/index",
"pages/SwipeActionAnimation/index",
"pages/SwipeActionNumber/index",
"pages/SwipeActionLeft/index",
"pages/SwipeAction/index",
"pages/ActionSheet/index",
"pages/Form/index",
"pages/FormLayout/index",
Expand All @@ -27,7 +36,6 @@
"pages/ButtonIcon/index",
"pages/ButtonCustom/index",
"pages/Modal/index",
"pages/SwipeAction/index",
"pages/Tabs/index",
"pages/TabsScroll/index",
"pages/TabsSticky/index",
Expand Down
169 changes: 6 additions & 163 deletions demo/pages/SwipeAction/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,175 +1,18 @@
<view class="t-swipe">
<view class="t-swipe-item">
<view class="t-swipe-item-title">按钮在左侧-基础用法</view>
<view class="t-swipe-item-title">基础用法</view>
<swipe-action
leftButtons="{{[set]}}"
elasticity="{{false}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
一个按钮
</view>
</swipe-action>
<swipe-action
leftButtons="{{[set, his]}}"
elasticity="{{false}}"
damping="20"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
两个按钮-设置弹性速度
</view>
</swipe-action>
<swipe-action
leftButtons="{{[set, his, del]}}"
elasticity="{{true}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
三个按钮-弹性动画
</view>
</swipe-action>
<view class="t-swipe-item-title">按钮在右侧-基础用法</view>
<swipe-action
rightButtons="{{[set]}}"
elasticity="{{false}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
一个按钮
</view>
</swipe-action>
<swipe-action
rightButtons="{{[set, his]}}"
elasticity="{{false}}"
damping="20"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
两个按钮-设置弹性速度
</view>
</swipe-action>
<swipe-action
rightButtons="{{[set, his, del]}}"
elasticity="{{true}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
三个按钮-弹性动画
</view>
</swipe-action>
<view class="t-swipe-item-title">按钮在右侧-点击二次确认-弹性动画</view>
<swipe-action
rightButtons="{{[{...setTap, width: 330}]}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
一个按钮-自定义按钮宽度
</view>
</swipe-action>
<swipe-action
rightButtons="{{[setTap, {...hisTap, width: 200}]}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
两个按钮-自定义按钮宽度
</view>
</swipe-action>
<swipe-action
rightButtons="{{[setTap, hisTap, {...delTap, width: 120}]}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
三个按钮-自定义按钮宽度
</view>
</swipe-action>
<view class="t-swipe-item-title">按钮在右侧-滑动二次确认-弹性动画</view>
<swipe-action
rightButtons="{{[{...setTap, confirmType: 'move', width: 340}]}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
一个按钮-自定义按钮宽度
</view>
</swipe-action>
<swipe-action
rightButtons="{{[{...setTap, confirmType: 'move'}, hisTap]}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
两个按钮(限制:仅一个按钮可设置滑动确认)
</view>
</swipe-action>
<swipe-action
rightButtons="{{[setTap, hisTap, moveTap]}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
三个按钮(限制:仅一个按钮可设置滑动确认)
</view>
</swipe-action>
<view class="t-swipe-item-title">左右测都有按钮(限制: 两侧所有按钮宽度相加需要相等)</view>
<swipe-action
leftButtons="{{[set]}}"
rightButtons="{{[set]}}"
elasticity="{{false}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
一个按钮
</view>
</swipe-action>
<swipe-action
leftButtons="{{[set, his]}}"
rightButtons="{{[set, his]}}"
elasticity="{{false}}"
damping="20"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
两个按钮-设置弹性速度
</view>
</swipe-action>
<swipe-action
leftButtons="{{[set, his, del]}}"
rightButtons="{{[set, his, del]}}"
a:for="{{ 10 }}"
data-item="{{{ index }}}"
rightButtons="{{ rightBtns }}"
elasticity="{{true}}"
swiped="{{ swipeIndex === index }}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con">
三个按钮-弹性动画
右侧-三个按钮
</view>
</swipe-action>
<view class="safe-view"></view>
</view>
</view>
71 changes: 25 additions & 46 deletions demo/pages/SwipeAction/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,29 @@
Page({
data: {
set: {
text: '设为常用',
bgColor: '#1677FF',
color: '#fff',
},
del: {
text: '删除',
bgColor: '#FF2B00',
color: '#fff',
},
his: {
text: '往来记录',
bgColor: '#FFA91B',
color: '#fff',
},
setTap: {
text: '设为常用',
bgColor: '#1677FF',
color: '#fff',
confirmType: 'tap',
confirmText: '确认设为常用吗?'
},
delTap: {
text: '删除',
bgColor: '#FF2B00',
color: '#fff',
confirmType: 'tap',
confirmText: '确认删除吗?'
},
hisTap: {
text: '往来记录',
bgColor: '#FFA91B',
color: '#fff',
confirmType: 'tap',
confirmText: '确认往来记录吗?'
},
moveTap: {
text: '删除',
bgColor: '#FF2B00',
color: '#fff',
confirmType: 'move',
confirmText: '确认删除吗?'
}
rightBtns: [
{
text: '设为常用',
bgColor: '#1677FF',
color: '#fff',
},
{
text: '删除',
bgColor: '#FF2B00',
color: '#fff',
},
{
text: '往来记录',
bgColor: '#FFA91B',
color: '#fff',
},
],
swipeIndex: -1
},
onSwipeStart() {
this.setData({ swipeIndex: '' });
},
onSwipeEnd(e, data) {
const { index } = e.target.dataset.item;
data.swiped && this.setData({ swipeIndex: index });
},
onSwipeStart() {},
onSwipeEnd() {},
onButtonTap() {},
});
8 changes: 2 additions & 6 deletions demo/pages/SwipeAction/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
margin: 0 auto;
background-color: @COLOR_BACKGROUND;
&-item {
height: 110 * @rpx;
line-height: 110 * @rpx;
height: 130 * @rpx;
line-height: 130 * @rpx;
font-size: 32 * @rpx;
color: @COLOR_TEXT_PRIMARY;
&-title {
Expand Down Expand Up @@ -38,8 +38,4 @@
}
}
}
.safe-view {
width: 100%;
height: 100 * @rpx;
}
}
18 changes: 18 additions & 0 deletions demo/pages/SwipeActionAnimation/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<view class="t-swipe">
<view class="t-swipe-item">
<view class="t-swipe-item-title">去除松开手之后的滑动回弹效果</view>
<swipe-action
a:for="{{ 10 }}"
data-item="{{{ index }}}"
rightButtons="{{ rightBtns }}"
elasticity="{{false}}"
swiped="{{ swipeIndex === index }}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
>
<view class="t-swipe-item-con">
右侧-三个按钮
</view>
</swipe-action>
</view>
</view>
29 changes: 29 additions & 0 deletions demo/pages/SwipeActionAnimation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
Page({
data: {
rightBtns: [
{
text: '设为常用',
bgColor: '#1677FF',
color: '#fff',
},
{
text: '往来记录',
bgColor: '#FFA91B',
color: '#fff',
},
{
text: '删除',
bgColor: '#FF2B00',
color: '#fff',
},
],
swipeIndex: -1
},
onSwipeStart() {
this.setData({ swipeIndex: '' });
},
onSwipeEnd(e, data) {
const { index } = e.target.dataset.item;
data.swiped && this.setData({ swipeIndex: index });
},
});
9 changes: 9 additions & 0 deletions demo/pages/SwipeActionAnimation/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"defaultTitle": "Swipe-Action",
"pullRefresh": "NO",
"showProgress": "NO",
"allowsBounceVertical": "NO",
"usingComponents": {
"swipe-action": "../../../src/SwipeAction/index"
}
}
Loading