答题积分小程序云开发实战-界面交互篇:积分排名页布局样式与逻辑交互开发
微信小程序云开发实战-答题积分赛小程序
界面交互篇:积分排名页布局样式与逻辑交互开发
积分排名页效果图
积分排名布局与样式实现
这个积分排名页的页面布局,设计上是比较美观的,主要展示排名、用户头像昵称、积分信息。我曾搭建的消防安全知识答题、网络安全知识答题、安全生产知识答题等,都是使用这种方式实现的。
页面布局
在rank.wxml中,编写布局代码:
<view class="mw-page">
<view class="menu menu-avatar cu-list">
<view class="cu-item">
<view class="cu-avatar lg round">
<image class="avatar" src="/images/0.png" mode="widthFix"></image>
</view>
<view class='content'>
<view class='text-gray'>
<text class="icon-upstagefill text-yellow"></text> 第<text class="text-yellow text-xl">1</text>名
</view>
<view class='text-sm text-grey'>姑苏洛言</view>
</view>
<view class='action'>
<view class='text-xl text-yellow'>20积分</view>
</view>
</view>
</view>
</view>
页面样式
在rank.wxss中,编写样式代码:
page{
background-color: #fff;
}
.mw-page .menu.cu-list {
padding: 20rpx;
}
.mw-page .menu.cu-list .cu-item {
border: 2rpx solid #ddd;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
页面预览
保存后,可以在模拟器预览效果或者手机微信扫码后预览。
列表渲染
觉得太少了,看不出效果?
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
<view class="mw-page">
<view class="menu menu-avatar cu-list">
<view class="cu-item" wx:for="{{6}}" wx:key="index">
<view class="cu-avatar lg round">
<image class="avatar" src="/images/0.png" mode="widthFix"></image>
</view>
<view class='content'>
<view class='text-gray'>
<text class="{{index+1 <= 3?'icon-upstagefill text-yellow':'icon-medalfill text-gray'}}"></text> 第<text class="{{index+1 <= 3?'text-yellow':'text-gray'}} text-xl">{{index+1}}</text>名
</view>
<view class='text-sm text-grey'>姑苏洛言</view>
</view>
<view class='action'>
<view class='text-xl text-yellow'>20积分</view>
</view>
</view>
</view>
</view>
注意:默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
列表效果预览
保存后,可以在模拟器预览效果或者手机微信扫码后预览。