javascript/weui
1
0
Fork 0
mirror of https://github.com/Tencent/weui.git synced 2026-03-13 08:02:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 向左滑动出现按钮 #559

Browse Source
This commit is contained in:
bearyan
2017-04-18 17:14:19 +08:00
parent d03798806a
commit bdebbc3a3b
4 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/example/fragment/list.html
View File

@@ -12,7 +12,21 @@
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd" style="transform: translateX(-68px)">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a>
</div>
</div>
</div>
<div class="weui-cells__title">带图标、说明的列表项</div>
<div class="weui-cells">
<div class="weui-cell">

1
src/style/weui.less
View File

@@ -9,6 +9,7 @@
// cell
@import "./widget/weui-cell/weui-cell_global";
@import "./widget/weui-cell/weui-cell_swiped";
@import "./widget/weui-cell/weui-access";
@import "./widget/weui-cell/weui-check";

10
src/style/widget/weui-cell/weui-cell_global.less
View File

@@ -1,5 +1,12 @@
@import "../../base/fn";
/*
z-index:
0: .weui-swiped-btn
1: .weui-cell_swiped .weui-cell__bd
2: .weui-cells和.weui-cell的1px线
*/
.weui-cells {
margin-top: @weuiCellsMarginTop;
background-color: @weuiCellBg;
@@ -12,9 +19,11 @@
position: relative;
&:before {
.setTopLine(@weuiCellBorderColor);
z-index: 2;
}
&:after {
.setBottomLine(@weuiCellBorderColor);
z-index: 2;
}
}
@@ -47,6 +56,7 @@
&:before {
.setTopLine(@weuiCellBorderColor);
left: @weuiCellGapH;
z-index: 2;
}
&:first-child {
&:before {

31
src/style/widget/weui-cell/weui-cell_swiped.less Normal file
View File

@@ -0,0 +1,31 @@
@import "../../base/fn";
.weui-cell_swiped {
display: block;
padding: 0;
> .weui-cell__bd {
position: relative;
z-index: 1;
background-color: #FFFFFF;
}
> .weui-cell__ft {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
color: #FFFFFF;
}
}
.weui-swiped-btn {
display: block;
padding: @weuiCellGapV 1em;
line-height: @weuiCellLineHeight;
color: inherit;
}
.weui-swiped-btn_default {
background-color: #C7C7CC;
}
.weui-swiped-btn_warn {
background-color: #FF3B30;
}