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

QMUI · Apr 18, 2017 · bdebbc3 · bdebbc3
1 parent d037988
commit bdebbc3
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 0 deletions.
diff --git a/src/example/fragment/list.html b/src/example/fragment/list.html
@@ -12,7 +12,21 @@ <h1 class="page__title">List</h1>
                 </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">

diff --git a/src/style/weui.less b/src/style/weui.less
@@ -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";

diff --git a/src/style/widget/weui-cell/weui-cell_global.less b/src/style/widget/weui-cell/weui-cell_global.less
@@ -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 {

diff --git a/src/style/widget/weui-cell/weui-cell_swiped.less b/src/style/widget/weui-cell/weui-cell_swiped.less
@@ -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;
+}