小程序之排行榜效果实现
原创
效果图
2022-03-07_205202.png
实现步骤
引入组件
在page.json文件中引入
{
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-divider": "@vant/weapp/divider/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
}
}wxml页面显示
<container>
<view class="content">
<van-divider
contentPosition="center"
customStyle="color: #00B26B; border-color: #00B26B; font-size: 20px; font-weight: bolder;"
>TOP 10</van-divider>
<van-tabs
sticky
swipeable type="card"
color="#00B26B" >
<van-tab title="昨日收入明星">
<van-empty image="search" description="暂无更多" wx:if="{{lastdayIncome.length === 0}}" />
<block wx:for="{{lastdayIncome}}" wx:for-index="key">
<view class="rank">
<image wx:if="{{key == 0}}" class="img" src="../../images/jinpai.png"></image>
<image wx:if="{{key == 1}}" class="img" src="../../images/yinpai.png"></image>
<image wx:if="{{key == 2}}" class="img" src="../../images/tongpai.png"></image>
<text wx:if="{{key > 2}}" class="rankindex">{{key+1}} </text>
<text class="user">{{item.username}}</text>
<text class="money" wx:if="{{key == 0}}">{{item.total}}</text>
<text class="money1" wx:if="{{key == 1}}">{{item.total}}</text>
<text class="money2" wx:if="{{key == 2}}">{{item.total}}</text>
<text class="money3" wx:if="{{key > 2}}">{{item.total}}</text>
</view>
</block>
</van-tab>
<van-tab title="当月收入明星">
<van-empty image="search" description="暂无更多" wx:if="{{incomeList.length === 0}}" />
<block wx:for="{{incomeList}}" wx:for-index="key">
<view class="rank">
<image wx:if="{{key == 0}}" class="img" src="../../images/jinpai.png"></image>
<image wx:if="{{key == 1}}" class="img" src="../../images/yinpai.png"></image>
<image wx:if="{{key == 2}}" class="img" src="../../images/tongpai.png"></image>
<text wx:if="{{key > 2}}" class="rankindex">{{key+1}}</text>
<text class="user">{{item.username}}</text>
<text class="money" wx:if="{{key == 0}}">{{item.total}}</text>
<text class="money1" wx:if="{{key == 1}}">{{item.total}}</text>
<text class="money2" wx:if="{{key == 2}}">{{item.total}}</text>
<text class="money3" wx:if="{{key > 2}}">{{item.total}}</text>
</view>
</block>
</van-tab>
</van-tabs>
</view>
</container>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录