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

前言

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

页面标题实现

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

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

信息框的实现

页面结构实现

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

代码如下：

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

页面样式实现

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

代码如下：

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

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

页面结构实现

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

代码如下：

<!--学生到校离校信息查询列表的实现-->
<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>

页面样式实现

1. 给informationQueryListView添加左右内边距;
2. 给informationQueryView添加上下内边距、下边框；
3. 给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;
}

正在加载实现

页面结构实现

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

代码如下：

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

页面样式实现

1. 给loadingView里面的图片设置大小；
2. 给loadingView里面的文本设置大小;
3. 给loadingView设置文本居中、高度、背景颜色、行高;
4. 给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;
}