答题积分小程序云开发实战-界面交互篇：首页布局样式与交互开发
发布于 2 年前 作者 mhuang 2745 次浏览 来自 分享

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

界面交互篇：首页页面布局样式与逻辑交互开发

首页效果图

布局思路

5行布局，即5个块级元素，轮播图、通告栏、个人信息、功能区、版权。


实现细节

轮播图区域

实现轮播图效果，可以拆分一下，先实现图片展示效果，再实现轮播效果。需要使用图片组件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>
       

 

保存后，在模拟器实时预览效果：

看着轮播图效果就已经基本完善了。但是，想让它实现自动轮播，怎么办？

再添加几个属性吧，在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>欢迎来到「护网专题信息安全知识竞答」，S2赛季火热进行中~</text>
</view>
<!-- 通告栏 end -->

个人信息区域

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

<!-- 个人信息区域 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>
<!-- 个人信息区域 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;
}

保存后，在模拟器实时预览效果：



主功能按钮区域

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

 
<!-- 主功能按钮区域 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>
<!-- 主功能按钮区域 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;
}

保存后，在模拟器实时预览效果：

这样，首页的静态界面就完成了。

页面跳转逻辑交互

实现页面跳转逻辑交互，有两种方式：

1、通过导航组件 navigator，添加页面链接的方式实现；

2、通过API路由wx.navigateTo，添加点击事件监听及其处理函数的方式实现；

这里，我选择后者去进行实现。

跳转至个人中心页

添加点击事件，在index.wxml中，编写布局代码：

实现路由跳转，在index.js中，编写布局代码：

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

跳转至答题页

添加点击事件，在index.wxml中，编写布局代码：

实现路由跳转，在index.js中，编写布局代码：

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

跳转至积分排名页

添加点击事件，在index.wxml中，编写布局代码：

实现路由跳转，在index.js中，编写布局代码：

goToRank() {
    wx.navigateTo({
    		url: '../rank/rank'
    })
}
回到顶部