一、首页布局简单思路

回顾上一篇博文，首页的内容主要有轮播图，横向滑动菜单以及菜单对应的view，横向滑动菜单有签到、课堂测试、模拟测试、课堂提问、答问记录五个选项，当点击选项时更新显示view。由于素材和时间有限，所以布局做得相对简单，主要是侧重思路及代码逻辑。

二、轮播图

查看文档，发现轮播图使用的是swiper组件，swiper有以下属性：

属性名 类型 默认值 说明 最低版本
indicator-dots Boolean false 是否显示面板指示点  
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
autoplay Boolean false 是否自动切换  
current Number 0 当前所在页面的 index  
interval Number 5000 自动切换时间间隔  
duration Number 500 滑动动画时长  
circular Boolean false 是否采用衔接滑动  
vertical Boolean false 滑动方向是否为纵向  
bindchange EventHandle   current 改变时会触发 change 事件，event.detail = {current: current, source: source}  

那就可以定义一个swiper，样式指定高，宽铺满，swiper里的image组件图片100%显示就能铺满屏幕。还有一点，轮播图是从服务器请求的，那应当用一个block去循环请求到的url列表来设置swiper-item里头的image组件，然后遍历在前台显示。前台的代码如下：

<view class='section'>

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" class='swiper'>

<block wx:for="{{vedioImgUrls}}" wx:key="*this">

<swiper-item id="{{index}}" catchtap="swiperItemClick" >

<image src="{{item.thumbnail.url}}" />

</swiper-item>

</block>

</swiper>

</view>

样式代码：

/* 轮播样式 */

.swiper{

width: 100%;

height: 240px;

}

/* 轮播图片样式 */

.swiper swiper-item image{

width: 100%;

}

当然，现在是空的数据，显示不了啥，因为并没有从服务器获取数据，先指定一个本地图片上海交大计算机网络课程的缩略图，效果如下：

三、横向滑动菜单

查看文档，滑动组件就是scroll-view，scroll-view有比较多的属性，常用属性就是scroll-x和scroll-y:

属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number   设置竖向滚动条位置
scroll-left Number   设置横向滚动条位置
scroll-into-view String   值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper EventHandle   滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle   滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle   滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

于是思路就是给一个scroll-view设置scroll-x属性为true，然后scroll-view里头有五个菜单label，这里说下label是可以把几个组件合并的，在点击事件的使用有意想不到的效果，于是得到前台代码如下：

<view class='section'>

<scroll-view class="categories" scroll-x="true">

<block wx:for="{{selectedScrollItems}}" wx:key="*this">

<label class="category" id="{{index}}" bindtap='scrollMenuClick'>

<view wx:if="{{menuIndex==index}}" style='color:green; font-size: 18px;'>{{item}}</view>

<view wx:else style='color:royalblue;'>{{item}}</view>

</label>

</block>

</scroll-view>

</view>

样式代码：

/* 滑动菜单样式 */

.categories {

height: 40px;

line-height: 40px;

border: 1px solid #eee;

white-space: nowrap;

display: flex;

}

/* 滑动菜单item样式 */

.categories .category {

width: 80px;

height: 40px;

text-align: center;

display: inline-block;

border-right: 1px solid #eee;

color: royalblue;

font-size: 15px;

}

效果如下：

四、子菜单对应view

首先，需求是点击选项显示不同的界面，那么思路就可以这样：设计5个view，点到谁谁显示其他隐藏就好。那么逻辑就是在前台写五个view，后台写五个view对应的标记，当选中时该对应标记为true，前台根据这个标记去判定是否渲染，于是得到前台代码如下：

<view class='section' hidden='{{selectedScrollItemsHiddenSign[0]}}'>

签到

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[1]}}'>

课堂测试

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[2]}}'>

模拟测试

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[3]}}'>

课堂提问

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[4]}}'>

答问记录

</view>

后台代码：

data{

// 菜单选项

selectedScrollItems: ['签到', '课堂测试', '模拟测试', '课堂提问', '答问记录'],

// 菜单选项隐藏和显示标志

selectedScrollItemsHiddenSign: [false, true, true, true, true]

}

在scroll-view绑定的scrollMenuClick事件里头代码如下：

scrollMenuClick:function(e){

// 隐藏其他页面并显示当前点击的菜单页面

for (var i = 0; i < this.data.selectedScrollItemsHiddenSign.length;i++){

if (i == e.currentTarget.id) this.data.selectedScrollItemsHiddenSign[i] = false;

else this.data.selectedScrollItemsHiddenSign[i] = true;

}

this.setData({ menuIndex: e.currentTarget.id, selectedScrollItemsHiddenSign: this.data.selectedScrollItemsHiddenSign});

// 显示加载logo

wx.showToast({

title: '加载中',

icon: 'loading',

duration:10000

});

// 选中第一个菜单

if (e.currentTarget.id == 0){

setTimeout(function () {

wx.hideToast()

}, 3000);

}// 选中第二个菜单，加载课堂测试题

else if (e.currentTarget.id == 1){

setTimeout(function () {

wx.hideToast()

}, 3000);

}

// 选中第三个菜单

else if (e.currentTarget.id == 2) {

setTimeout(function () {

wx.hideToast()

}, 3000);

}

// 选中第四个菜单

else if (e.currentTarget.id == 3) {

setTimeout(function () {

wx.hideToast()

}, 3000);

}

// 选中最后一个菜单

else {

setTimeout(function () {

wx.hideToast()

}, 3000);

}

}

效果：

五、设置tabBar

如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

1. 当设置 position 为 top 时，将不会显示 icon

2. tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

具体属性如下：

属性 类型 必填 默认值 描述
color HexColor 是   tab 上的文字默认颜色
selectedColor HexColor 是   tab 上的文字选中时的颜色
backgroundColor HexColor 是   tab 的背景色
borderStyle String 否 black tabbar上边框的颜色， 仅支持 black/white
list Array 是   tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性 类型 必填 说明
pagePath String 是 页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPath String 否 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

于是，结合我们上一篇的需求，制作tabBar需要三个页面即三个page，因此app.json配置如下：

{

"pages": [

"pages/main/main",

"pages/post/post",

"pages/mine/mine",

"pages/vedioPlayer/vedioPlayer",

"pages/start/start"

],

"window": {

"navigationBarTextStyle": "white",

"navigationBarBackgroundColor": "#118fff",

"navigationBarTitleText": "课堂宝",

"backgroundColor": "#fff"

},

"tabBar": {

"color": "#9BABBA",

"selectedColor": "#495056",

"borderStyle": "black",

"backgroundColor": "dark",

"list": [

{

"pagePath": "pages/main/main",

"text": "首页",

"iconPath": "static/images/tar-home.png",

"selectedIconPath": "static/images/tar-home-on.png"

},

{

"pagePath": "pages/post/post",

"text": "习题",

"iconPath": "static/sources/发帖32x32.png",

"selectedIconPath": "static/sources/发帖32x32hl.png"

},

{

"pagePath": "pages/mine/mine",

"text": "我的",

"iconPath": "static/sources/我的32x32.png",

"selectedIconPath": "static/sources/我的32x32hl.png"

}

]

},

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

}

}

于是就得到界面效果如下：

下一篇将会写到签到子页面的布局及连接服务器获得视频信息并加载播放等。

微信小程序（看文档写实例三）微信小程序课堂宝APP实现整体界面框架及首页布局相关推荐

  1. 微信小程序（看文档写实例二）微信小程序课堂宝APP

    全程记录APP的开发过程,项目完结公上传Github. 一.需求 由于老板让做一个课堂信息化APP,想想在移动端开发,小程序不分Android和IOS,所以就选择了微信小程序,软件的需求不多,但整体内 ...

  2. 微信小程序（看文档写实例十）微信小程序课堂宝APP实现我的模块相关界面及逻辑

    继上篇博文,这篇完成最后一个模块,即我的模块. 一.页面效果 这个模块是和用户类型相关的,因此老师账号和学生账号能看的功能不一样,老师端效果如下: 点击头像到达个人信息如下: 点击后可以做相应的修改. ...

  3. 微信小程序（看文档写实例十一）微信小程序课堂宝APP完结总结及github地址

    一.总结 国庆假期偷懒了几天,从接到任务到分析到实现总共花了20天左右,终于完成了,点名功能由于要实时监听需要收费,所以没有给出代码,需要完成的可以自己动手实现.用一张导图来结束: 二.源码地址 所有 ...

  4. 微信小程序（看文档写实例六）微信小程序课堂宝APP实现签到逻辑

    继上篇博文,这篇写下签到实现的逻辑. 一.实现逻辑 发起签到 1.先上传当前自己的定位经纬度 2.学生查询老师的最后一次签到记录,如果发现签到记录signComplete为false说明有新的签到 3 ...

  5. 微信小程序（看文档写实例八）微信小程序课堂宝APP实现练习模块前台

    接上篇博文,这篇主要描述练习模块的前台显示,其中包括test页面,答题detail页面以及提交答题后答卷answer页面. 一.练习模块test页面 练习页面主要展示的是当前用户的头像,昵称以及学校信 ...

  6. 微信小程序（看文档写实例四）微信小程序课堂宝APP实现签到子页面布局及课程视频播放页面

    一.签到子页面布局 子页面主要是一个签到按钮,然后下方是签到记录列表. 1.签到按钮 布局代码: <button class='sign-button' bindtap='sign'>签到 ...

  7. 微信小程序（看文档写实例五）微信小程序课堂宝APP实现获取签到列表

    根据上篇博文,这篇主要实现获取签到列表逻辑. 获得签到列表主要有以下步骤: (1)查询老师的ID (2)查询老师的签到记录 (3)如果当前用户是老师,直接显示所有记录,因为签到记录都是老师发起的,肯定 ...

  8. 微信小程序（看文档写实例九）微信小程序课堂宝APP实现练习模块逻辑代码

    接上篇博文,这篇主要描述练习模块的代码逻辑,其中包括test页面,答题detail页面以及提交答题后答卷answer页面. 一.test页面 test页面其实就是从服务器获得章节练习题的内容,然后统计 ...

  9. python使用微信设置-微信 python 接口 -- itchat 文档

    itchat 一. 安装 $ pip install itchat 特殊的字典使用方式 通过打印 itchat 的用户以及注册消息的参数, 可以发现这些值都是字典. 但实际上 itchat 精心构造了 ...

最新文章

  1. Rancher-创建自己的应用商店教程
  2. 面试题整理8 字符串的排列
  3. 人脸识别翼闸使用规范_人行通道闸如何搭配人脸识别使用
  4. jquery三级联动模糊查询_jquery三级联动
  5. mysql 服务器性能,mysql服务器性能配置
  6. java enumset_java.util.EnumSet.allOf()方法和实例的学习
  7. java web服务_将Java服务公开为Web服务
  8. Python使用pandas读取Excel文件多个WorkSheet的数据并绘制柱状图和热力图
  9. 联想 m73 黑苹果 软路由 esxi AIO
  10. 制造业公司通用的FICO成本核算方法介绍
  11. Holy Grail
  12. [Zer0pts2020]easy strcmp 分析与加法
  13. JAVA之socket编程服务器与客户端通信--实现简易聊天室
  14. 排序算法为什么要求稳定性
  15. python儿童编程例子代码-python儿童编程
  16. 基于图像处理的路面裂缝检测系统设计与研究
  17. C语言获取一个数字各位数的乘积
  18. 江西靖安推行“村庄清洁革命”：设垃圾兑换银行 大数据管理
  19. LeetCode Nim游戏 题解
  20. 微信小程序中使用vant框架

热门文章

  1. Linux-配置yum软件仓库
  2. CUDA与OpenGL交互开发
  3. 《流量的秘密》读后感
  4. 四个要诀提升个人执行力
  5. 经典提高培养情商最有效的13本书
  6. 使用newman导出postman响应数据到本地文件
  7. 智慧水务软件-科学系统架构-数字化管理
  8. 书读百遍其义自见-------2017--05--27读书篇
  9. java canwrite_Java File canWrite()用法及代码示例
  10. 字符集和字符编码为什么乱码是问号?