左滑删除 --- 自定义组件(优化)

想来想去  还是先引入组件吧

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;
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%;
100%;
}
.i-swipeout-demo-button{
70px;
float:left;
display: flex;
height:100%;
justify-content: center;
background:#2d8cf0;
color:#fff;
align-items:center;
}
 
原文地址:https://www.cnblogs.com/lipuqing180906/p/9988680.html