當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >界面交互篇:積分排名頁(yè)布局樣式與邏輯交互開(kāi)發(fā)

界面交互篇:積分排名頁(yè)布局樣式與邏輯交互開(kāi)發(fā)

發(fā)布時(shí)間：2024-01-18 15:40:12 瀏覽量：112次

微信小程序云開(kāi)發(fā)實(shí)戰(zhàn)-答題積分賽小程序

界面交互篇：積分排名頁(yè)布局樣式與邏輯交互開(kāi)發(fā)

積分排名頁(yè)效果圖

積分排名布局與樣式實(shí)現(xiàn)

這個(gè)積分排名頁(yè)的頁(yè)面布局，設(shè)計(jì)上是比較美觀的，主要展示排名、用戶頭像昵稱、積分信息。我曾搭建的消防安全知識(shí)答題、網(wǎng)絡(luò)安全知識(shí)答題、安全生產(chǎn)知識(shí)答題等，都是使用這種方式實(shí)現(xiàn)的。

頁(yè)面布局

在rank.wxml中，編寫(xiě)布局代碼：

<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>

頁(yè)面樣式

在rank.wxss中，編寫(xiě)樣式代碼：

 
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;
}

頁(yè)面預(yù)覽

保存后，可以在模擬器預(yù)覽效果或者手機(jī)微信掃碼后預(yù)覽。

列表渲染

覺(jué)得太少了，看不出效果？

在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。

<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>