!-- 向左滑动删除功能 --!-- 整体盒子 --view class="item-box"  !-- 所有项 --  view class="items"    !-- 每一项 --    view wx:for="{{list}}" wx:key="{{index}}" class="item"      view class='inner txt'        !-- 排名 --        i{{item.ranking}}/i        !-- 头像 --        image class="item-icon" mode="widthFix" src="{{icon}}"/image        !-- 名字 --        i {{item.studentName}}/i        !-- 时间 --        span class="item-data"          i class="rankpace" {{item.attendTime}}/i        /span      /view    /view  /view/view复制代码

.item-box {  width: 700rpx;  margin: 0 auto;  padding: 20rpx 0;}.items {  width: 100%;}.item {  position: relative;  border-top: 2rpx solid #eee;  height: 115rpx;  line-height: 115rpx;  overflow: hidden;}.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;}.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;}.inner.del {  background-color: #e64340;  width: 180rpx;  text-align: center;  z-index: 4;  right: 0;  color: #fff;}view {  box-sizing: border-box;}.item:last-child {  border-bottom: 2rpx solid #eee;}.inner {  position: absolute;  top: 0;}复制代码

{  "navigationBarTitleText": "排行榜"}复制代码

Page({  data: {    delBtnWidth: 180,    // 数据    list: [],    icon: "../../images/logIcon.png"  },  onLoad: function(options) {    console.log("排行榜", options.id);    var that = this;    wx.request({      url: '########attendStatus=1&scope=1&selectTime=' + options.id +'&studentNo=' + wx.getStorageSync("studentNo"),      method: 'GET',      header: {        Authorization: 'Bearer' + wx.getStorageSync("token"),      },      success: function(res) {        console.log("排行榜", res.data.data);        if (res.data.data != null) {          that.setData({            list: res.data.data,          })        } else {          wx.showModal({            title: '提示',            content: '当天没有数据',            showCancel: false,            success: function(res) {              if (res.confirm) {                console.log('用户点击确定');                wx.navigateBack({                  delta: 1 //小程序关闭当前页面返回上一页面                })              }            }          })        }      }    })  },  onReady: function() {    // 页面渲染完成  },  onShow: function() {  },  onHide: function() {    // 页面隐藏  },  onUnload: function() {    // 页面关闭  },})复制代码

往后余生，唯独有你简书作者：达叔小生90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客： www.jianshu.com/u/c785ece60…

结语

下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注小礼物走一走 or 点赞