04_心理咨询_微信小程序项目实战_咨询页面静态效果实现

一、页面标题

        我们之前在app.json里面进行了全局配置，设置标题为十方智育；

        现在咨询预约页面的标题不是十方智育，那么我们可以通过页面配置将全局配置给覆盖掉；
    
        页面配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page. html

        每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

        页面配置的所有配置项，我们都在全局配置中给大家说过。

        注：为了方便查看所写页面效果，我们可以添加编译模式；

        在consult.json中配置页面标题；

{
  "usingComponents": {},
  "navigationBarTitleText":"咨询预约"
}

二、筛选框

2.1 页面结构

        1、定义一个view，给其添加id：filterView；

        2、在filterView里面定义图片和文本；

<!-- 筛选框 -->
<view id="filterView">
  <image src="/images/@2x_touch.png"></image>
  <text> 点击筛选</text>
</view>

2.2 样式实现

        1、给filterView里面的图片设置大小；

        2、给filterView里面的文本设置大小、字体颜色；

        3、给filterView设置文本居中、高度、背景颜色、行高；

        4、给filterView里面的图片和文字设置垂直对齐方式；

/* 筛选框样式 */
#filterView{
  background: #87cefa;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
}

#filterView > image{
  width: 48rpx;
  height: 48rpx;
  vertical-align: middle;
}

#filterView > text{
  font-size: 30rpx;
  color: #fff;
  vertical-align: middle;
}

三、咨询师列表

3.1 页面结构

        1、定义一个view，给其定义id：consultListView，用来承载所有的咨询师；

        2、在consultListView定义一个view，给其定义class：consultView；

        3、在consultView里面定义两个view，左边的view是用来承载图片，右边的view是用来承载咨询师信息，给其定义class：consultInfoView，我们把咨询师的信息放在三个子view里面；
                一个咨询师的结构实现了，其他的就是复制粘贴即可；
                将来结合数据的时候，其实就只需要一个view结构，因为view放在循环里面使用，有多少数据就遍历多少个view；

    
        选择器：用来选择页面元素给其添加样式；
                #xx    根据id选择元素；
                .yy    根据类选择元素；
                zz    根据组件名选择元素
                父元素 > 子元素    选择父元素的所有子元素
                父元素 子元素    选择父元素的所有后代元素
                父元素 > 子元素:nth-child(num)    选择父元素的第num个子元素

<!-- 咨询师列表 -->
<view id="consultListView">
  <!-- 一个咨询师的结构 -->
  <view class="consultView">
    <view>
      <image src="/images/zxs01.jpg"></image>
    </view>
    <view class="consultInfoView">
      <view>张婧</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <view>
      <image src="/images/zxs02.jpg"></image>
    </view>
    <view class="consultInfoView">
      <view>憨豆</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <view>
      <image src="/images/zxs03.jpg"></image>
    </view>
    <view class="consultInfoView">
      <view>韩梅梅</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <view>
      <image src="/images/zxs04.jpg"></image>
    </view>
    <view class="consultInfoView">
      <view>李维嘉</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <view>
      <image src="/images/zxs05.jpg"></image>
    </view>
    <view class="consultInfoView">
      <view>刘诗诗</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <view>
      <image src="/images/zxs06.jpg"></image>
    </view>
    <view class="consultInfoView">
      <view>黎曼</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
    </view>
  </view>
</view>

3.2 样式实现

        1、给consultListView设置左右内边距；
    
        2、给consultView设置上下内边距、下边框、flex布局；
    
        3、给consultView里面的图片设置大小、右外边距；
    
        4、给consultInfoView里面的三个子元素，分别设置文字大小、粗细、颜色、行高；

/* 咨询师列表样式 */
#consultListView{
  padding: 0 10rpx;
}

.consultView{
  padding: 10rpx 0;
  border-bottom: 1rpx solid #F1F1F1;
  display: flex;
}

.consultView image{
  width: 180rpx;
  height: 180rpx;
  margin-right: 10rpx;
}

.consultInfoView > view:nth-child(1){
  font-size: 34rpx;
  font-weight: bold;
  line-height: 50rpx;
}

.consultInfoView > view:nth-child(2){
  font-size: 30rpx;
  color: #5E5E5E;
  line-height: 50rpx;
}

.consultInfoView > view:nth-child(3){
  font-size: 24rpx;
  color: #A9A9A9;
  line-height: 40rpx;
}

四、正在加载

4.1 页面结构

        1、定义view，给其添加id：loadingView
    
        2、在loadingView里面定义图片和文字即可；
    
        注：正在加载区域，要结合动态数据使用，当我们从后台获取数据，但是数据还没拿到的时候，展示loadingView，如果拿到了数据，因此loadingView；

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

4.2 样式实现

        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;
}