效果图如下:
图片. png
- wxml:
- <view class="item-box">
- <view class="items">
- <view wx:for="{{list}}" wx:key="{{index}}" class="item">
- <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt">
- <image class="item-icon" mode="widthFix" src="{{item.url}}"></image>
- <i> {{item.name}}</i>
- <span class="item-data">
- <i class="rankpace"> {{item.steps}}</i>
- </span>
- </view>
- </view>
- </view>
- </view>
- 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 });
- },
- });
- },
- })
来源: http://www.jianshu.com/p/bb7131114993