微信小程序排行榜

 好看的排行榜界面

wxml

<!--ranklist.wxml-->
<view class="container">
  <scroll-view class="list" scroll-y bindscrolltolower="{{hasReachBottom}}">
    <view wx:for="{{key}}" wx:key="item" wx:for-index="index">
      <view class="item">
        <block wx:if="{{index === 0}}">
          <image class="photo" src="../../image/金牌.png" mode="aspectFit"></image>
        </block>
        <block wx:else>
          <block wx:if="{{index === 1}}">
            <image class="photo" src="../../image/银牌.png" mode="aspectFit"></image>
          </block>
          <block wx:else>
            <block wx:if="{{index === 2}}">
              <image class="photo" src="../../image/铜牌.png" mode="aspectFit"></image>
            </block>
            <block wx:else>
              <text class="index">{{index+1}}</text>
            </block>
          </block>
        </block>
        <image class="avatar" src="{{item.headshot}}"></image>
        <view class="left">
          <text class="nickname">{{item.name}}</text>
          <text class="city">{{item.xueyuan}}</text>
        </view>
        <view class="right">
          <text class="solve">累计获得积分</text>
          <text class="type">{{item.totalpoint+'分'}}</text>
        </view>
      </view>
    </view>
  </scroll-view>
  <view class="list">
    <view class="me">
      <block wx:if="{{rank === 1}}">
        <image class="photo" src="../../image/金牌.png" mode="aspectFit"></image>
      </block>
      <block wx:else>
        <block wx:if="{{rank === 2}}">
          <image class="photo" src="../../image/银牌.png" mode="aspectFit"></image>
        </block>
        <block wx:else>
          <block wx:if="{{rank === 3}}">
            <image class="photo" src="../../image/铜牌.png" mode="aspectFit"></image>
          </block>
          <block wx:else>
            <text class="index">{{rank}}</text>
          </block>
        </block>
      </block>
      <image class="avatar" src="{{headshot}}"></image>
      <view class="left">
        <text class="nickname">{{name}}</text>
        <text class="city">{{xueyuan}}</text>
      </view>
      <view class="right">
        <text class="solve">累计获得积分</text>
        <text class="type">{{totalpoint+'分'}}</text>
      </view>
    </view>
  </view>
</view>
js界面
Page({
  data: {
    id:'',
    key: [], // 排行榜数据
    rank: '',
    headshot: '',
    name: '',
    xueyuan: '',
    totalpoint: '',
    hasReachBottom: false // 是否已经滚动到底部
  },

  onLoad: function () {
    var accountInfo = wx.getStorageSync('account');
    if (accountInfo) {
      this.setData({
        id:accountInfo.id
      })
    }//getinformation
    var that = this 
    wx.request({
      url: 'http://localhost:8090/getinformation2',
      data:{  
        id:that.data.id
     },
      method: 'GET',
      success: function (res) {
        that.setData({
          name: res.data.name,
          xueyuan:res.data.xueyuan,
          headshot:res.data.headshot,
          totalpoint:res.data.totalpoint,
          rank:res.data.ranking
        });
      }
    });
    wx.request({
      url: 'http://localhost:8090/getallstudentrank',
      method: 'GET',
      success: function (res) {
        that.setData({
          key:res.data
        });
      }
    });
  },

  // 移动选项卡
  moveTabL: function () {
    this.setData({
      tabPosition: 'transformL'
    });
  },
  moveTabR: function () {
    this.setData({
      tabPosition: 'transformR'
    });
  },

  // 滚动到底部
  hasReachBottom: function () {
    this.setData({
      hasReachBottom: true
    });
  }
});
wxss界面
/**ranklist.wxss**/
.container{
  width: 100%;
  height: 100vh;
   background: #1DC7EA;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1DC7EA), color-stop(100%, #4091ff));
    background: -webkit-linear-gradient(top, #1DC7EA 0%, #4091ff 100%);
    background: -o-linear-gradient(top, #1DC7EA 0%, #4091ff 100%);
    background: -ms-linear-gradient(top, #1DC7EA 0%, #4091ff 100%);
    background: linear-gradient(to bottom, #1DC7EA 0%, #4091ff 100%);
    overflow-y:hidden;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@keyframes moveToRight{
    0%{
         margin-left: 0%; 
    }
       
   100%{
          margin-left: 50%; 
    }
}
@keyframes moveToLeft{
    0%{
        margin-left: 50%;  
    }
      
   100%{
        margin-left: 0%; 
    }
}
 
.list{
  height:82%;
}
.footer{
  height: 30px;
}
 
.list .item{
  width: 91%;
  height: 65px;
  display: flex;
  flex-direction:row;
  color: #FFFFFF;
  opacity: 1;
  background: rgba(255, 255, 255, 0.23);
  margin-top:10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
 
.list .me{
  width: 91%;
  height: 65px;
  display: flex;
  flex-direction:row;
  color: #FFEEEF;
  opacity: 1;
  background: rgba(0, 255, 255, 0.63);
  margin-top:10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
 
.list .index{
  margin-top: 23px;
  margin-left: 15px;
  margin-right: 10px;
  color: greenyellow;
}
 
.list .avatar{
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
   margin-top: 12px;
}
 
.list .left{
  display: inline-block;
  margin-top: 10px;
  text-overflow:ellipsis;
  width: 130px;
  overflow:hidden;
  white-space:nowrap;
}
 
.list .male{
  font-size: 20px;
  margin-top: 10px;
  margin-left: 5px;
  color: blue;
}
 
.list .female{
  font-size: 20px;
  margin-top: 10px;
  margin-left: 5px;
  color: plum;
}
 
.list .unknow{
  font-size: 20px;
  margin-top: 10px;
  margin-left: 5px;
  color: black
}
 
.list .nickname{
  font-size: 20px;
  margin-top: 10px;
  margin-left: 4px;
}
 
.list .city{
  margin-top: 5px;
  margin-left: 5px;
  display:block;
  font-size: 13px;
}
 
 
.list .right{
  display: inline-block;
  position: absolute;
  margin-left: 60%;
  margin-top: 15px;
}
 
.list .solve{
  font-size: 15px;
  display: block;
}
 
.list .type{
  margin-top: 5px;
  display:block;
  font-size: 15px;
  color: gold;
  margin-left: 22px;
}
.photo{
  height: 30px;
  width: 30px;
  margin-top: 20px;
}
posted @ 2024-01-29 19:44  不洗澡超酷  阅读(127)  评论(0)    收藏  举报