答题积分小程序云开发实战-界面交互篇：积分排名页布局样式与逻辑交互开发

微信小程序云开发实战-答题积分赛小程序

界面交互篇：积分排名页布局样式与逻辑交互开发

积分排名页效果图

积分排名布局与样式实现

这个积分排名页的页面布局，设计上是比较美观的，主要展示排名、用户头像昵称、积分信息。我曾搭建的消防安全知识答题、网络安全知识答题、安全生产知识答题等，都是使用这种方式实现的。

页面布局

在rank.wxml中，编写布局代码：

  
    
      
        
      
      
        
           第1名
        
        姑苏洛言
      
      
        20积分
      
    
  

页面样式

在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 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

  
    
      
        
      
      
        
           第{{index+1}}名
        
        姑苏洛言
      
      
        20积分
      
    
  

注意：默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

列表效果预览

保存后，可以在模拟器预览效果或者手机微信扫码后预览。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net