微信小程序云开发实战-答题积分赛小程序
界面交互篇：积分排名页布局款式与逻辑交互开发
积分排名页效果图
积分排名布局与款式实现
这个积分排名页的页面布局，设计上是比拟好看的，次要展现排名、用户头像昵称、积分信息。我曾搭建的消防安全常识答题、网络安全常识答题、平安生产常识答题等，都是应用这种形式实现的。
页面布局
在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。
列表成果预览
保留后，能够在模拟器预览成果或者手机微信扫码后预览。