微信小程序仿微信运动步数排行-交互

作者 : 开心源码 本文共1475个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共112人阅读

效果图如下:

图片.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.jsPage({  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 });      },    });      },})

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 微信小程序仿微信运动步数排行-交互

发表回复