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

界面交互篇：首頁頁面布局樣式與邏輯交互開發(fā)

首頁效果圖

布局思路

5行布局，即5個塊級元素，輪播圖、通告欄、個人信息、功能區(qū)、版權。

實現(xiàn)細節(jié)

輪播圖區(qū)域

實現(xiàn)輪播圖效果，可以拆分一下，先實現(xiàn)圖片展示效果，再實現(xiàn)輪播效果。需要使用圖片組件image、滑塊視圖容器swiper。

圖片組件image

在index.wxml中，編寫布局代碼：

<image src="/images/b2.jpg"></image>

保存后，在模擬器實時預覽效果：

顯然，這樣的頁面效果并不符合我們的預期。我們想要的頁面效果是，圖片寬度要占滿屏幕的。

所以，我給它設置了兩項：

在index.wxml中，添加屬性mode和class，并設置其值，編寫布局代碼：

<image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image>

在index.wss中，添加設置寬度的樣式，編寫樣式代碼：

.banner-img {
		width: 100%;
}

保存后，在模擬器實時預覽效果：

補充說明：

關于image組件的mode=widthFix。

widthFix：縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變。

塊視圖容器swiper

swiper只可放置swiper-item組件。

在index.wxml中，編寫布局代碼：

<swiper>
    <swiper-item>
    		<image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image>
    </swiper-item>
</swiper>

保存后，在模擬器實時預覽效果：

因為只有一張圖片，所以看不出來，但是你可以左右滑動試試看，就明白了。

好吧，我們多添加兩個，再完善一下，在index.wxml中，編寫布局代碼：

<swiper class="screen-swiper" indicator-dots="{{true}}">
    <swiper-item>
    		<image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image>
    </swiper-item>
    <swiper-item>
    		<image src="/images/b3.jpg" mode='widthFix' class="banner-img"></image>
    </swiper-item>
    <swiper-item>
    		<image src="/images/b4.jpg" mode='widthFix' class="banner-img"></image>
    </swiper-item>
</swiper>

保存后，在模擬器實時預覽效果：

看著輪播圖效果就已經(jīng)基本完善了。但是，想讓它實現(xiàn)自動輪播，怎么辦？

再添加幾個屬性吧，在index.wxml中，編寫布局代碼：

<!-- 輪播圖 start -->
<swiper class="screen-swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="5000" duration="500">
    <swiper-item>
    		<image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image>
    </swiper-item>
    <swiper-item>
    		<image src="/images/b3.jpg" mode='widthFix' class="banner-img"></image>
    </swiper-item>
    <swiper-item>
    		<image src="/images/b4.jpg" mode='widthFix' class="banner-img"></image>
    </swiper-item>
</swiper>
<!-- 輪播圖 end -->

補充說明，關于swiper組件本次所應用到的屬性：

通告欄

在index.wxml中，編寫布局代碼：

<!-- 通告欄 start -->
<view class="bg-orange light padding-sm text-sm">
  <text class="icon-notice"></text>
  <text>歡迎來到「護網(wǎng)專題信息安全知識競答」，S2賽季火熱進行中~</text>
</view>
<!-- 通告欄 end -->

個人信息區(qū)域

在index.wxml中，編寫布局代碼：

<!-- 個人信息區(qū)域 start -->
<view class="container">
    <view class="power padding-left-sl">
        <view class="cu-avatar">
        		<image class="avatar" src="/images/0.png" mode="widthFix"></image>
        </view>
        <view class="power_info">
            <view class="power_info_text">
                <view class="power_info_text_title">張三</view>
                <view class="power_info_text_tip">積分：100</view>
            </view>
            <image class="power_info_more" src="/images/arrow.svg"></image>
        </view>
    </view>
</view>
<!-- 個人信息區(qū)域 end -->

在index.wss中，編寫樣式代碼：

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.power {
    margin-top: 30rpx;
    border-radius: 5px;
    background-color: white;
    width: 93%;
    padding-bottom: 1rpx;
    position: relative;
    border: 2rpx solid #ddd;
}
.padding-left-sl {
		padding-left: 130rpx;
}
.cu-avatar {
    position: absolute;
    top: 40rpx;
    left: 20rpx;
    width: 100rpx;
}

.power_info {
    display: flex;
    padding: 30rpx 25rpx;
    align-items: center;
    justify-content: space-between;
}

.power_info_more {
    width: 30rpx;
    height: 30rpx;
    transform: rotate(0deg);
}

.power_info_less {
    width: 30rpx;
    height: 30rpx;
    transform: rotate(270deg);
}

.power_info_text {
    display: flex;
    flex-direction: column;
}

.power_info_text_title {
    font-weight: 400;
    font-size: 35rpx;
}

.power_info_text_tip {
    color: rgba(0, 0, 0, 0.4);
    font-size: 25rpx;
    margin-top: 10rpx;
}

.power_item {
    padding: 30rpx 25rpx;
    display: flex;
    justify-content: space-between;
}

.power_item_title {
		font-size: 30rpx;
}

.power_item_icon {
    width: 30rpx;
    height: 30rpx;
}

保存后，在模擬器實時預覽效果：

主功能按鈕區(qū)域

在index.wxml中，編寫布局代碼：

<!-- 主功能按鈕區(qū)域 start -->
<view class='grid col-2 padding-left-xs padding-right-xs padding-top-sm'>
    <view class='padding-sm'>
            <view class='bg-sky padding radius btn-box'>
                <view class="text-lg">開始答題</view>
                <view class='margin-top-sm text-Abc'>從題庫中隨機抽題</view>
                <view class="icon-box">
                    <text class="icon-writefill text-white"></text>
                </view>
            </view>
      </view>
      <view class='padding-sm'>
        <view class='bg-yellow padding radius btn-box'>
        		<view class="text-lg">積分排名</view>
        		<view class='margin-top-sm text-Abc'>積分由高到低排行</view>
            <view class="icon-box">
                <text class="icon-upstagefill text-white"></text>
            </view>
        </view>
    </view>
</view>
<!-- 主功能按鈕區(qū)域 end -->

在index.wss中，編寫樣式代碼：

.line {
    width: 95%;
    margin: 0 auto;
    height: 2rpx;
    background-color: rgba(0, 0, 0, 0.1);
}

.icon-box {
    text-align: right;
    padding-top: 50rpx;
}
.icon-box text {
		font-size: 150rpx;
}

保存后，在模擬器實時預覽效果：

底部版權聲明

在index.wxml中，編寫布局代碼：

<!-- 底部版權聲明 start -->
<view class="environment">
		版權所有 ?木番薯科技
</view>
<!-- 底部版權聲明 end -->

在index.wss中，編寫樣式代碼：

.environment {
    color: #ccc;
    font-size: 24rpx;
    margin-top: 15%;
    text-align: center;
}

保存后，在模擬器實時預覽效果：

這樣，首頁的靜態(tài)界面就完成了。

頁面跳轉邏輯交互

實現(xiàn)頁面跳轉邏輯交互，有兩種方式：

1、通過導航組件 navigator，添加頁面鏈接的方式實現(xiàn)；

2、通過API路由wx.navigateTo，添加點擊事件監(jiān)聽及其處理函數(shù)的方式實現(xiàn)；

這里，我選擇后者去進行實現(xiàn)。

跳轉至個人中心頁

添加點擊事件，在index.wxml中，編寫布局代碼：

實現(xiàn)路由跳轉，在index.js中，編寫布局代碼：

goToMy() {
    wx.navigateTo({
        url: '../my/my'
    })
}

跳轉至答題頁

添加點擊事件，在index.wxml中，編寫布局代碼：

實現(xiàn)路由跳轉，在index.js中，編寫布局代碼：

goToTest() {
    wx.navigateTo({
    		url: '../test/test'
    })
}

跳轉至積分排名頁

添加點擊事件，在index.wxml中，編寫布局代碼：

實現(xiàn)路由跳轉，在index.js中，編寫布局代碼：

goToRank() {
    wx.navigateTo({
    		url: '../rank/rank'
    })
}