左滑刪除 --- 自定義元件（優化）
阿新 • • 發佈：2018-11-20
想來想去 還是先引入元件吧
http://bmob-cdn-20610.b0.upaiyun.com/2018/11/20/736355a740c835f9806ee0d021ff6696.rar
複製以上鍊接 直接下載 之後壓縮 放進你的專案
在引入頁面引入
下列方法：
wxml
<view class='pagesNotive' wx:if='{{pagesName=="普通通知"}}'> <!-- <view class='notiveList' wx:for='{{3}}'> <image src='http://bmob-cdn-20610.b0.upaiyun.com/2018/09/29/feccb68e40357c8e80cd3700282a2f6d.jpeg'></image> <view class='notiveListRight'> <view class='notiveListRightTop'> <text>系統訊息</text> <view class='rightText'> 2018-10-29 </view></view> <view class='notiveMsg'> 通知，系統已經升級，有了寫新功能檢視</view> </view> </view> --> <i-swipeout i-class="i-swipeout-demo-item" actions="{{actions}}" wx:for='{{3}}' wx:key='item'> <view slot="content"> <view class='notiveList'> <image src='http://bmob-cdn-20610.b0.upaiyun.com/2018/09/29/feccb68e40357c8e80cd3700282a2f6d.jpeg'></image> <view class='notiveListRight'> <view class='notiveListRightTop'> <text>系統訊息</text> <view class='rightText'> 2018-10-29 </view></view> <view class='notiveMsg'> 通知，系統已經升級，有了寫新功能檢視</view> </view> </view> </view> </i-swipeout> </view> js JSON { "usingComponents": { "i-swipeout": "../../../dist/swipeout/index", "i-cell-group": "../../../dist/cell-group/index", "i-cell": "../../../dist/cell/index", "i-card": "../../../dist/card/index", "i-icon": "../../../dist/icon/index", "i-action-sheet": "../../../dist/action-sheet/index" } } wxss/***********************************************元件 左滑刪除樣式 *****************************************************************/ .i-swipeout-demo-item{ border-bottom:#333 solid 1px; } .i-cell-padding{ padding:5px 0px!important; font-size:14px; } .i-swipeout-demo-title{ height:30px; padding:0 15px; line-height:30px; margin-top:20px; margin-bottom:5px; } .i-swipeout-demo-des{ padding:0 15px; margin-bottom:10px; font-size:12px; color:#ff9900; } /*左中右結構*/ .i-swipeout-image{ float:left; width:50px; height:50px; line-height:40px; text-align:center; margin-right: 5%; background: #2d8cf0; } .i-swipeout-des{ margin-left:50px; } .i-swipeout-des-detail{ font-size:12px; word-break:break-all; color:#80848f; }
/*自定義按鈕*/ .i-swipeout-demo-button-group{ height:100%; width:100%; } .i-swipeout-demo-button{ width:70px; float:left; display: flex; height:100%; justify-content: center; background:#2d8cf0; color:#fff; align-items:center; }