好看的排行榜界面
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; } 标签：微信,top,0%,程序,排行榜,list,10px,margin,left From： https://www.cnblogs.com/yangkaiwen/p/17995203