devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：爱喝兽奶帝天荒 | 2024-07-21 00:00:12

赞

踩

咨询页面的发布

一、页面标题

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

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

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

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

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

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

  1. {
  2.   "usingComponents": {},
  3.   "navigationBarTitleText":"咨询预约"
  4. }

二、筛选框

2.1 页面结构

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

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

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

2.2 样式实现

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

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

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

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

  1. /* 筛选框样式 */
  2. #filterView{
  3.   background: #87cefa;
  4.   height: 88rpx;
  5.   text-align: center;
  6.   line-height: 88rpx;
  7. }
  8.  
  9. #filterView > image{
  10.   width: 48rpx;
  11.   height: 48rpx;
  12.   vertical-align: middle;
  13. }
  14.  
  15. #filterView > text{
  16.   font-size: 30rpx;
  17.   color: #fff;
  18.   vertical-align: middle;
  19. }

三、咨询师列表

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个子元素

  1. <!-- 咨询师列表 -->
  2. <view id="consultListView">
  3.   <!-- 一个咨询师的结构 -->
  4.   <view class="consultView">
  5.     <view>
  6.       <image src="/images/zxs01.jpg"></image>
  7.     </view>
  8.     <view class="consultInfoView">
  9.       <view>张婧</view>
  10.       <view>国家二级咨询师</view>
  11.       <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
  12.     </view>
  13.   </view>
  14.   <view class="consultView">
  15.     <view>
  16.       <image src="/images/zxs02.jpg"></image>
  17.     </view>
  18.     <view class="consultInfoView">
  19.       <view>憨豆</view>
  20.       <view>国家二级咨询师</view>
  21.       <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
  22.     </view>
  23.   </view>
  24.   <view class="consultView">
  25.     <view>
  26.       <image src="/images/zxs03.jpg"></image>
  27.     </view>
  28.     <view class="consultInfoView">
  29.       <view>韩梅梅</view>
  30.       <view>国家二级咨询师</view>
  31.       <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
  32.     </view>
  33.   </view>
  34.   <view class="consultView">
  35.     <view>
  36.       <image src="/images/zxs04.jpg"></image>
  37.     </view>
  38.     <view class="consultInfoView">
  39.       <view>李维嘉</view>
  40.       <view>国家二级咨询师</view>
  41.       <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
  42.     </view>
  43.   </view>
  44.   <view class="consultView">
  45.     <view>
  46.       <image src="/images/zxs05.jpg"></image>
  47.     </view>
  48.     <view class="consultInfoView">
  49.       <view>刘诗诗</view>
  50.       <view>国家二级咨询师</view>
  51.       <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
  52.     </view>
  53.   </view>
  54.   <view class="consultView">
  55.     <view>
  56.       <image src="/images/zxs06.jpg"></image>
  57.     </view>
  58.     <view class="consultInfoView">
  59.       <view>黎曼</view>
  60.       <view>国家二级咨询师</view>
  61.       <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研能指导师...</view>
  62.     </view>
  63.   </view>
  64. </view>

3.2 样式实现

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

  1. /* 咨询师列表样式 */
  2. #consultListView{
  3.   padding: 0 10rpx;
  4. }
  5.  
  6. .consultView{
  7.   padding: 10rpx 0;
  8.   border-bottom: 1rpx solid #F1F1F1;
  9.   display: flex;
  10. }
  11.  
  12. .consultView image{
  13.   width: 180rpx;
  14.   height: 180rpx;
  15.   margin-right: 10rpx;
  16. }
  17.  
  18. .consultInfoView > view:nth-child(1){
  19.   font-size: 34rpx;
  20.   font-weight: bold;
  21.   line-height: 50rpx;
  22. }
  23.  
  24. .consultInfoView > view:nth-child(2){
  25.   font-size: 30rpx;
  26.   color: #5E5E5E;
  27.   line-height: 50rpx;
  28. }
  29.  
  30. .consultInfoView > view:nth-child(3){
  31.   font-size: 24rpx;
  32.   color: #A9A9A9;
  33.   line-height: 40rpx;
  34. }

四、正在加载

4.1 页面结构

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

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

4.2 样式实现

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

        2、给loadingView里面的文本设置大小；

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

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

  1. /* 正在加载样式 */
  2.  
  3. #loadingView{
  4.   text-align: center;
  5.   height: 88rpx;
  6.   background: #F0EFF5;
  7.   line-height: 88rpx;
  8. }
  9.  
  10. #loadingView > image{
  11.   width: 48rpx;
  12.   height: 48rpx;
  13.   vertical-align: middle;
  14. }
  15.  
  16. #loadingView > text{
  17.   font-size: 28rpx;
  18.   vertical-align: middle;
  19. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/858921
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号