前言

之前在app.json的文件里进行了全局配置，设置标题为学生打卡器。
而现在的信息查询页面的标题不是学生打卡器，可以用页面配置把对此页面的全局配置覆盖掉。
页面配置
app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面标题实现

一句话总结，so easy！ (详细看过页面配置)
代码如下：

{"usingComponents": {},"navigationBarTitleText": "信息查询"
}

信息框的实现

页面结构实现

定义1个view，给其添加id:informationView;
在informationView里面定义文本；

代码如下：

<!--到校离校信息框的实现-->
<view id="informationTitleView"><text>学生到校离校信息查询</text>
</view>

页面样式实现

给informationView里面的文字设置字体大小、颜色；
给informationView设置文本居中、高度、背景颜色、行高；
给informationView里面的文本设置垂直对齐方式；

代码如下：

/*到校离校信息框样式*/
#informationTitleView{background: #87cefa;height: 88rpx;text-align: center;line-height: 88rpx;
}
#informationTitleView > text{font-size: 30rpx;color: #fff;vertical-align: middle;
}

学生到校离校信息查询列表实现

页面结构实现

定义1个view，给其添加id：informationQueryListView,用来承载学生到校离校信息查询列表;
在informationQueryListView里定义1个view，给其定义class:informationQueryView;
一个信息查询的结构实现了，将来的结合数据，只用循环就可以实现;

代码如下：

<!--学生到校离校信息查询列表的实现-->
<view id="informationQueryListView"><!--一天学生到校离校信息查询--><view class="informationQueryView"><text>2022.1.24（1）学生到校离校信息</text></view><view class="informationQueryView"><text>2022.1.25（2）学生到校离校信息</text></view><view class="informationQueryView"><text>2022.1.26（3）学生到校离校信息</text></view><view class="informationQueryView"><text>2022.1.27（4）学生到校离校信息</text></view><view class="informationQueryView"><text>2022.1.28（5）学生到校离校信息</text></view>
</view>

页面样式实现

给informationQueryListView添加左右内边距;
给informationQueryView添加上下内边距、下边框；
给informationQueryView里面的文字设置字体大小、颜色、行高;

代码如下：

/*学生到校离校信息查询列表的样式*/
#informationQueryListView{padding:0 10rpx;text-align: center;height: 150rpx;line-height:150rpx;
}
.informationQueryView{padding:10rpx 0;border-bottom: 1rpx solid #f1f1f1;vertical-align: middle;color:#0000A0;background: #C0C0C0;
}

正在加载实现

页面结构实现

定义view,给其添加id：loadingView；
在loadingView里面定义图片和文字；
注：正在加载区域，要结合动态数据使用，当我们从后台获取数据时，没有拿到数据，展示loadingView，拿到数据则隐藏loadingView;

代码如下：

<!--正在加载-->
<view id="loadingView"><image src="/images/xsdkq_information_query_zzjz.gif"></image><text>正在加载更多数据</text>
</view>

页面样式实现

给loadingView里面的图片设置大小；
给loadingView里面的文本设置大小;
给loadingView设置文本居中、高度、背景颜色、行高;
给loadingView里面的图片和文字设置垂直对齐方式;

代码如下：

/*正在加载样式*/
#loadingView{text-align: center;height: 88rpx;background: #f0eff5;line-height: 88rpx;
}
#loadingView > image{width:48rpx;height:48rpx;vertical-align: middle;
}
#loadingView > text{font-size: 28rpx;vertical-align: middle;
}

微信小程序(第十四章) - 信息查询页面的实现相关推荐

微信小程序（第二十三章）- 注册页面的实现
微信小程序(第二十三章)- 注册页面的实现页面实现页面实现基本和登录页面一样. 代码如下:  <form bindsubmit="toR ...
微信小程序+.NET(十四) 悦听小说小程序（待续）
微信小程序之第二版展示悦听小说(YueTingBook) ==>2019.12.16 今天知道个人微信号无法使用web-view,直接影响该项目很多功能,该项目待商城项目完成后继续研究... ...
移动开发技术_微信小程序_第四章测试
第4章自测已完成重做还可以重做1次截止时间:2022-12-19 09:36:00 1 [单选题]下面不属于scroll-view组件属性的是(). A. scroll-x B. scroll- ...
微信小程序开发（四）跳转页面、传递参数获得数据
上一篇:微信小程序学习笔记(三) 上一篇获得博客数据如下图,现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到 ...
微信小程序把玩（四十）animation API
原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...
【信息系统项目管理师】第十四章信息文档管理和配置管理（考点汇总篇）
[信息系统项目管理师]第十四章信息文档管理和配置管理(考点汇总篇) 考点分析与预测配置管理在第三版新大纲中内容压缩减少了.它不属于十大管理领域,但是从历年考试来看,一般上午题目考2-3分,下午案例 ...
高项_第十四章信息文档管理与配置管理
第十四章信息文档管理与配置管理软件文档分为三类若管理文档中的3标注了开发文档,则属于开发文档里若没有开发两字,则属于管理文档中文档质量的四个等级配置管理什么是配置管理(了解) 配置管理的6 ...
微信小程序快速入门+四个实战小程序（一）——入门准备
一)系列达成目标介绍二)小程序创建的准备 1)注册开发者账号 2)下载编译器 ------------------------------------------------------ 一)系列达 ...
微信小程序学习（四）：微信小程序连接云数据库
微信小程序学习(四):微信小程序连接云数据库我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里 ...

微信小程序(第十四章) - 信息查询页面的实现

微信小程序（第十四章）- 信息查询页面的实现

前言

页面标题实现

信息框的实现

页面结构实现

页面样式实现

学生到校离校信息查询列表实现

页面结构实现

页面样式实现

正在加载实现

页面结构实现

页面样式实现

微信小程序(第十四章) - 信息查询页面的实现相关推荐

最新文章

热门文章