wxml
代码语言：javascript复制<view class="item-box">
<view class="items">
<view wx:for="{{list}}" wx:key="{{index}}" class="item">
<view data-index="{{index}}" class="inner txt">
<span class="item-data">{{item.rank}}</span>
<span class="item-datacenter"> {{item.name}}</span>
<span class="item-data">
<i class="rankpace"> {{item.pace}}</i>
</span>
</view>
</view>
</view>
</view>wxss
代码语言：javascript复制/* pages/leftSwiperDel/index.wxss */
.item-box{
width: 700rpx;
margin: 0 auto;
padding:40rpx 0;
font-size: 30rpx;
}
.items{
width: 100%;
}
.item{
position: relative;
border-top: 2rpx solid rgb(248, 244, 244);
height: 106rpx;
line-height: 120rpx;
overflow: hidden;
}
.inner.txt{
background-color: #fff;
width: 100%;
z-index: 5;
transition: left 0.2s ease-in-out;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.item-data{
width: 20%;
display: inline-block;
background: #eee;
text-align: center;
}
.item-datacenter{
display: inline-block;
width: 60%;
text-align: center;
}
.rankpace{
color: #fa7e04;
}js
代码语言：javascript复制// pages/leftSwiperDel/index.js
Page({
data: {
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
this.tempData();
},
//测试临时数据
tempData: function () {
var list = [
{
rank: "CPU",
txtStyle: "",
name: "intel酷睿500 ",
pace: "236.00",
},
{
rank: "主板",
txtStyle: "",
name: "影驰RDTFY 8980",
pace: "450",
},
{
rank: "内存",
txtStyle: "",
name: "华硕7689 DRDT",
pace: "245",
},
{
rank: "硬盘",
txtStyle: "",
name: "希捷ssss 90808",
pace: "217",
},
]
this.setData({
list: list
});
}
})原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见
