左滑删除 --- 自定义组件（优化）

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

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;

}