效果图如下：

图片.png

wxml:

{{item.name}}

{{item.steps}}

wxss：

/* pages/leftSwiperDel/index.wxss */

view{

box-sizing: border-box;

}

.item-box{

width: 700rpx;

margin: 0 auto;

padding:40rpx 0;

}

.items{

width: 100%;

}

.item{

position: relative;

border-top: 2rpx solid #eee;

height: 120rpx;

line-height: 120rpx;

overflow: hidden;

}

.item:last-child{

border-bottom: 2rpx solid #eee;

}

.inner{

position: absolute;

top:0;

}

.inner.txt{

background-color: #fff;

width: 100%;

z-index: 5;

padding:0 10rpx;

transition: left 0.2s ease-in-out;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.inner.del{

background-color: #e64340;

width: 180rpx;text-align: center;

z-index: 4;

right: 0;

color: #fff

}

.item-icon{

width: 64rpx;

height: 64rpx;

vertical-align: middle;

margin-right: 16rpx;

margin-left:13px;

border-radius:50%;

}

.item-data{

float: right;

margin-right:5%;}

.rankpace{

color: #fa7e04;

}

js:

// pages/leftSwiperDel/index.js

Page({

data: {

list: null,

},

onLoad: function (options) {

var that = this;

//加载数据

wx.request({

url: "https://pig.intmote.com/bison_xc/wx/sort.do",

method: 'GET',

header: {

'Content-type': 'application/json'

},

success: function (res) {

console.log(res.data)

that.setData({ list: res.data });

},

});

},

})

原文作者：祈澈姑娘

技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。

精彩链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。