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

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

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

首页效果图

布局思路

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'
    })
}
回到顶部