关于前端:答题积分小程序云开发实战界面交互篇首页布局样式与交互开发

34次阅读

共计 4648 个字符,预计需要花费 12 分钟才能阅读完成。

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

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

首页效果图

布局思路

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'})
}

正文完
 0