微信小程序云开发实战-答题积分赛小程序
界面交互篇:首页页面布局样式与逻辑交互开发
首页效果图
布局思路
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'
})
}