添加左划效果

@@ -17,7 +17,7 @@
                 margin-top: 20px;
                 margin-top: 20px;
             }
             }
 
 
-            .fav-del {
+            .fav-del-left {
                 display: none;
                 display: none;
                 float: left;
                 float: left;
                 width: 50px;
                 width: 50px;
@@ -38,6 +38,30 @@
                 display: block;
                 display: block;
             }
             }
 
 
+            .fav-del-right {
+                position: absolute;
+                top: 0;
+                right: -126px;
+                background: #ff3b30;
+                width: 126px;
+                height: 200px;
+                text-align: center;
+
+                .fav-del-btn {
+                    display: inline-block;
+                    width: 35px;
+                    height: 43px;
+                    margin-top: 50px;
+                    background: resolve("home/fav/fav-del-btn.png");
+                    background-size: 100%;
+                }
+
+                .fav-del-txt {
+                    font-size: 24px;
+                    color: #fff;
+                }
+            }
+
             .fav-img-box {
             .fav-img-box {
                 width: 152px;
                 width: 152px;
                 height: 203px;
                 height: 203px;
@@ -156,7 +180,7 @@
                 border-bottom: 1px solid #e0e0e0;
                 border-bottom: 1px solid #e0e0e0;
             }
             }
 
 
-            .fav-del {
+            .fav-del-left {
                 display: none;
                 display: none;
                 float: left;
                 float: left;
                 width: 50px;
                 width: 50px;

@@ -2,7 +2,7 @@
     <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
     <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
         <ul class="fav-brand-list">
         <ul class="fav-brand-list">
             <li v-for="item in brandData" track-by="fav_id">
             <li v-for="item in brandData" track-by="fav_id">
-                <div class="fav-del {{editmodel ? 'delshow': ''}}" @click="delItem($index, item.fav_id)">
+                <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="delItem($index, item.fav_id)">
                     <span class="fav-del-span"></span>
                     <span class="fav-del-span"></span>
                 </div>
                 </div>
                 <a :href="item.link">
                 <a :href="item.link">
@@ -14,6 +14,9 @@
                         <span class="down" v-if="item.down">品牌已下架</span>
                         <span class="down" v-if="item.down">品牌已下架</span>
                     </div>
                     </div>
                 </a>
                 </a>
+                <div class="fav-del-right">
+                    <span class="fav-del-btn"></span>
+                </div>
             </li>
             </li>
         </ul>
         </ul>
         <div class="fav-null-box {{ nullbox }}">
         <div class="fav-null-box {{ nullbox }}">

 <template>
 <template>
     <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
     <div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
         <ul class="fav-product-list">
         <ul class="fav-product-list">
-            <li v-for="item in productData" track-by="fav_id">
-                <div class="fav-del {{editmodel ? 'delshow': ''}}" @click="delItem($index, item.fav_id)">
+            <li v-for="item in productData" track-by="fav_id" id="li-{{$index}}">
+                <div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn($index)">
                     <span class="fav-del-span"></span>
                     <span class="fav-del-span"></span>
                 </div>
                 </div>
                 <a :href="item.link">
                 <a :href="item.link">
@@ -22,6 +22,11 @@
                         </div>
                         </div>
                     </div>
                     </div>
                 </a>
                 </a>
+                <div class="fav-del-right" id="del-{{$index}}" @click="delItem($index, item.fav_id)">
+                    <span class="fav-del-btn"></span>
+                    <br/>
+                    <span class="fav-del-txt">删除</span>
+                </div>
             </li>
             </li>
         </ul>
         </ul>
         <div class="fav-null-box {{ nullbox }}">
         <div class="fav-null-box {{ nullbox }}">
@@ -77,6 +82,11 @@
             editModel(action) {
             editModel(action) {
                 this.editmodel = action;
                 this.editmodel = action;
             },
             },
+            showDelBtn(index) {
+                var delBtn = $("#del-" + index);
+                var width = delBtn.width();
+                $("#li-" + index).css("transform","translateX(-" + width + "px)");
+            },
             delItem(index, id) {
             delItem(index, id) {
                 let _this = this;
                 let _this = this;
                 $.ajax({
                 $.ajax({