小程序排行榜

╰+攻爆jí腚メ 2021-09-17 02:42 359阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]

<view class="item-box">
 
 <view class="items">
 
 <view wx:for="{
 {list}}" wx:key="{
 {index}}" class="item">
 <view class='inner txt'>
 
 {
 {item.ranking}}
 
 <image class="item-icon" mode="widthFix" src="{
 {icon}}"></image>
 
 {
 {item.studentName}}
 
 
 {
 {item.attendTime}}
 
 </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后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
简书博客： [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/8466940a1a0d4e9eb3938e5b8d9d8705.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1