微信小程序排行榜模板

先上效果图：

扫描体验：

代码：

界面

<!--ranklist.wxml-->
<view class="container">
  <view class="header">
    <text class='text1' bindtap='moveTabR'>解锁榜</text><text class='text2' bindtap='moveTabL'>积分榜</text>
    <view class='bg {{tabPosition}}'></view>
  </view>
  <scroll-view class="list" scroll-y bindscrolltolower="{{hasReachBottom}}">
      <view wx:for-items="{{key}}" wx:key="item" wx:for-index="index">
          <view class="item">
                  <text class="index">{{index+1}}</text>
                  <image class="avatar" src="{{item.avatarUrl}}"></image>
                  <view class="left">
                      <text wx:if="{{item.gender==1}}" class="male">♂</text>
                      <text wx:elif="{{item.gender==2}}" class="female">♀</text>
                      <text wx:else class="unknow">ET</text>
                      <text class="nickname">{{item.nickname}}</text>
                      <text wx:if="{{item.city!=''}}" class="city">来自：{{item.city}}</text>
                      <text wx:else class="city">来自：外星</text>
                  </view>
                  <view class="right">
                    <text class="solve">{{tabPosition=='transformL'?'获得 '+item.balance+' 积分':'解锁 '+item.solveCount+' 首'}}</text>
                    <text wx:if="{{item.type==0}}" class="type">普通群众</text>
                    <text wx:elif="{{item.type==1}}" class="type">开发者好友</text>
                    <text wx:elif="{{item.type==2}}" class="type">普通VIP</text>
                    <text wx:elif="{{item.type==3}}" class="type">至尊VIP</text>
                    <text wx:else class="type">开发者</text>
                  </view>
          </view>
        </view>
    </scroll-view>
    <view class="list">
      <view class="me">
              <text class="index">{{me.rank==NaN?'∞':me.rank}}</text>
                  <image class="avatar" src="{{me.avatarUrl==undefined?'这是一张图片的url':me.avatarUrl}}"></image>
                  <view class="left">
                      <text wx:if="{{me.gender==1}}" class="male">♂</text>
                      <text wx:elif="{{me.gender==2}}" class="female">♀</text>
                      <text wx:else class="unknow">ET</text>
                      <text class="nickname">{{me.nickname==undefined?'未授权用户':me.nickname}}</text>
                      <text wx:if="{{me.city.length>0}}" class="city">来自：{{me.city}}</text>
                      <text wx:else class="city">来自：外星</text>
                  </view>
                  <view class="right">
                    <text wx:if="{{me.solveCount!=undefined&&me.balance!=undefined}}" class="solve">{{tabPosition=='transformL'?'获得 '+me.balance+' 积分':'解锁 '+me.solveCount+' 首'}}</text>
                    <text wx:else class="solve">{{tabPosition=='transformL'?'获得 0 积分':'解锁 0 首'}}</text>
                    <text wx:if="{{me.type==4}}" class="type">开发者</text>
                    <text wx:elif="{{me.type==1}}" class="type">开发者好友</text>
                    <text wx:elif="{{me.type==2}}" class="type">普通VIP</text>
                    <text wx:elif="{{me.type==3}}" class="type">至尊VIP</text>
                    <text wx:else class="type">普通用户</text>
                  </view>
       </view>
     </view>
</view>

样式

/**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;
}

.header{
  height:45px;
  width: 91%;
  flex-direction:row;
  color: #FFFFFF;
  opacity: 1;
  background: rgba(255, 255, 255, 0.23);
  margin-top:10px;
  margin-bottom: 5px;
  border-radius: 10px;
  
}
.header .text1{
  position: absolute;
  margin-left:13%; 
  font-size: 27px;
  margin-top:3px;
}
.header .text2{
  position: absolute;
  margin-left:57%; 
  font-size: 27px;
   margin-top:3px;
}
.header .bg{
  height:45px;
  width: 50%;
  display: inline-block;
  flex-direction:row;
  color: whitesmoke;
  opacity: 1;
  background: rgba(0, 255, 255, 0.63);
  border-radius: 10px;
  z-index: -1;
  
}
.transformL{
  animation:moveToRight 1s forwards;
}
.transformR{
  animation:moveToLeft 1s forwards;
}
@keyframes moveToRight{
    0%{
         margin-left: 0%; 
    }
       
   100%{
          margin-left: 50%; 
    }
}
@keyframes moveToLeft{
    0%{
        margin-left: 50%;  
    }
      
   100%{
        margin-left: 0%; 
    }
}

.list{
  height:45vh;
}
.footer{
  height: 30px;
}

.list .item{
  width: 91%;
  height: 75px;
  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: 75px;
  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: 1px;
}

.list .city{
  margin-top: 5px;
  margin-left: 5px;
  display:block;
  font-size: 15px;
}


.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;
}

事件

const app = getApp()
var user;
var userId;
var users;
var page=1;
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    mode: 1,
    hasReachBottom: "lower",
    tabPosition:''
  },
  onShareAppMessage: function (options) { },
  onShareTimeline: function (options) { },
  
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function (options) {
    var that = this;
    that.getRankList();
    that.getUserInfoByStorage();
  },
  //得到排行榜数据
 getRankList:function(){
    var that =this;
    page=1;
    wx.request({
      url: app.globalData.globalReqUrl+'/user/getRankList',
      data: {
        pageNum: page,
        pageSize: 10,
        mode: that.data.mode
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      success: function (res) {

        users = res.data.content
        console.log('得到的用户数据为：' + users)
        that.setData({
          key: users,
          page: page
        });

      },
      fail: function () {
        console.log("请求用户失败")
      }
    })
 },

 appendRankList:function(){
   var that = this;
   // 页数+1  
   page = page + 1;
   console.log("当前页：" + page)
   wx.request({
     url: app.globalData.globalReqUrl+'/user/getRankList',
     data: {
       pageNum: page,
       pageSize: 10,
       mode: that.data.mode
     },
     header: {
       'content-type': 'application/x-www-form-urlencoded'
     },
     method: 'POST',
     success: function (res) {
       console.log(res.data.content.length)
       if (res.data.content.length>0) {
         users = users.concat(res.data.content);
         console.log('追加了用户数据,数据长度：' + users.length)
         that.setData({
           key: users,
           page: page
         });
       } else {
         that.setData({
           hasReachBottom: 'reachBottom'
         })
       }

       // 隐藏加载框  
       wx.hideLoading();
     },
     fail: function () {
       console.log("请求用户失败")
     }
   })
 },

  lower: function () {
    console.log('上拉了')
    var that = this;
    // 显示加载图标  
    wx.showLoading({
      title: '玩命加载中',
    })
    that.appendRankList(); 
  },  
  reachBottom: function(){
    wx.showToast({
      title: '已经到底部啦',
      icon: 'none',
      duration: 1000
    })
  },

  moveTabR: function(){
    var that = this;
    console.log("向左")
    page=1;
    that.setData({
      tabPosition: 'transformR',
      mode: 1,
      hasReachBottom: "lower" 
    })
    that.getRankList();
    that.getUserInfoById();
  },
  moveTabL: function () {
    var that = this;
    console.log("向右")
    page=1;
    that.setData({
      tabPosition: 'transformL',
      mode: 2,
      hasReachBottom: "lower"
    })
    that.getRankList();
    that.getUserInfoById();
  },
  //得到用户信息
  getUserInfoByStorage: function () {
    var that = this;
    console.log("获取到的授权信息为:" + app.globalData.userInfo)
    //先从本地存储取userId,如果没有的话就注册
    wx.getStorage({
      key: 'userId',
      success: function (res) {
        console.log("从本地取到用户Id:" + res.data)
        userId = res.data;
        if (userId!=undefined&&userId!='undefined'){
          that.getUserInfoById();
        }
      },

      fail: function () {
        if (app.globalData.userInfo!=null){
          that.registerUser();
        }
      }
    })


  },
  //注册用户
  registerUser: function () {
    var that = this;
    wx.request({
      url: app.globalData.globalReqUrl+'/user/add',
      data: {
        avatarUrl: app.globalData.userInfo.avatarUrl,
        city: app.globalData.userInfo.city,
        country: app.globalData.userInfo.country,
        gender: app.globalData.userInfo.gender,
        nickname: app.globalData.userInfo.nickName,
        language: app.globalData.userInfo.language,
        province: app.globalData.userInfo.province
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      success: function (res) {
        if (res.data.code != 4001) {
          userId = res.data.content;
          console.log("新增或清除本地数据的用户的ID是:" + userId)          
          //设置缓存
          wx.setStorage({
            key: "userId",
            data: userId
          })
          //得到单条用户信息
          wx.request({
            url: app.globalData.globalReqUrl+'/user/getUserInfoRanked',
            data: {
              id: userId,
              mode: that.data.mode
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            method: 'POST',
            success: function (res) {
              user = res.data.content;
              console.log("新增或清除本地数据的用户的数据是:" + user)
              that.setData({
                me: user
              });
            },
            fail: function () {
              console.log("新增用户的请求失败");
            }
          })
        }
      },
      fail: function () {
        console.log("新增用户的请求失败");
      }
    })
  },
  getUserInfoById: function(){
    var that = this;
    //得到单条用户信息
    wx.request({
      url: app.globalData.globalReqUrl+'/user/getUserInfoRanked',
      data: {
        id: userId,
        mode: that.data.mode
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      success: function (res) {
        user = res.data.content;
        console.log("新增或清除本地数据的用户的数据是:" + user)
        that.setData({
          me: user
        });
      },
      fail: function () {
        console.log("新增用户的请求失败");
      }
    })
  }
})

关注微信公众号ClumsyRobot获取更多精彩内容：