devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

03_心理咨询_微信小程序项目实战_首页静态效果实现_微信小程序好看的静态首页页面

作者：小丑西瓜9 | 2024-02-19 09:16:48

赞

踩

微信小程序好看的静态首页页面

一、导航栏和tabBar

1.1 全局配置介绍

        微信小程序端中实现导航栏和tabBar，是通过配置实现的；这是区别于移动端开发的点；

        参考文档： https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
        
        小程序的配置分为三部分：
                全局配置：对微信小程序进行全局配置，它是对整个视口(可视化窗口)的设置；
                页面配置：对本页面的窗口表现进行配置。
                sitemap 配置：对微信小程序的索引规则的配置。

        小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

1.1.1 entryPagePath

        指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

  1. {
  2.   "entryPagePath": "pages/index/index"
  3. }

1.1.2 pages

        用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

        未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

        小程序中新增/减少页面，都需要对 pages 数组进行修改。

        定义四个tabBar页面：

  1. {
  2.     "pages": [
  3.         "pages/index/index",
  4.         "pages/consult/consult",
  5.         "pages/course/course",
  6.         "pages/my/my"
  7.     ]
  8. }

1.1.3 window

        用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。		iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色，仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色，仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为 px。
pageOrientationstringportrait屏幕旋转设置，支持 auto / portrait / landscape
  • 注 1：HexColor（十六进制颜色值），如"#ff00ff"
  • 注 2：关于navigationStyle
    • iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
    • iOS/Android 客户端 6.7.2 版本开始，navigationStyle: custom 对web-view组件无效
    • 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉
    • Windows 客户端 3.0 及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，navigationStyle: custom 不再生效

        全局窗口配置如下：

  1. {
  2.     "window": {
  3.         "backgroundTextStyle": "light",
  4.         "navigationBarBackgroundColor": "#fff",
  5.         "navigationBarTitleText": "十方智育",
  6.         "navigationBarTextStyle": "black",
  7.         "navigationStyle": "default",
  8.         "backgroundColor": "#eee",
  9.         "onReachBottomDistance": 60
  10.     }
  11. }

1.1.4 tabBar

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

属性类型必填默认值描述最低版本
colorHexColor是tab 上的文字默认颜色，仅支持十六进制颜色
selectedColorHexColor是tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor是tab 的背景色，仅支持十六进制颜色
borderStylestring否blacktabbar 上边框的颜色， 仅支持 black / white
listArray是tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
positionstring否bottomtabBar 的位置，仅支持 bottom / top
customboolean否false自定义 tabBar，见详情

        其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性类型必填说明
pagePathstring是页面路径，必须在 pages 中先定义
textstring是tab 上按钮文字
iconPathstring否图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。
selectedIconPathstring否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 position 为 top 时，不显示 icon。

        tabBar配置如下：

  1. {
  2.   "tabBar": {
  3.     "color": "#898989",
  4.     "selectedColor": "#87cefa",
  5.     "list": [{
  6.         "pagePath": "pages/index/index",
  7.         "text": "主页",
  8.         "iconPath": "/images/@2x_home_line.png",
  9.         "selectedIconPath": "/images/@2x_home.png"
  10.       },
  11.       {
  12.         "pagePath": "pages/consult/consult",
  13.         "text": "咨询",
  14.         "iconPath": "/images/@2x_talk_line.png",
  15.         "selectedIconPath": "/images/@2x_talk.png"
  16.       },
  17.       {
  18.         "pagePath": "pages/course/course",
  19.         "text": "课程",
  20.         "iconPath": "/images/@2x_class_line.png",
  21.         "selectedIconPath": "/images/@2x_class.png"
  22.       },
  23.       {
  24.         "pagePath": "pages/my/my",
  25.         "text": "我的",
  26.         "iconPath": "/images/@2x_my_line.png",
  27.         "selectedIconPath": "/images/@2x_my.png"
  28.       }
  29.     ]
  30.   }
  31. }

1.2 完整配置

  1. {
  2.   "entryPagePath": "pages/index/index",
  3.   "pages": [
  4.     "pages/index/index",
  5.     "pages/consult/consult",
  6.     "pages/course/course",
  7.     "pages/my/my"
  8.   ],
  9.   "window": {
  10.     "backgroundTextStyle": "light",
  11.     "navigationBarBackgroundColor": "#fff",
  12.     "navigationBarTitleText": "十方智育",
  13.     "navigationBarTextStyle": "black",
  14.     "navigationStyle": "default",
  15.     "backgroundColor": "#eee",
  16.     "onReachBottomDistance": 60
  17.   },
  18.   "tabBar": {
  19.     "color": "#898989",
  20.     "selectedColor": "#87cefa",
  21.     "list": [{
  22.         "pagePath": "pages/index/index",
  23.         "text": "主页",
  24.         "iconPath": "/images/@2x_home_line.png",
  25.         "selectedIconPath": "/images/@2x_home.png"
  26.       },
  27.       {
  28.         "pagePath": "pages/consult/consult",
  29.         "text": "咨询",
  30.         "iconPath": "/images/@2x_talk_line.png",
  31.         "selectedIconPath": "/images/@2x_talk.png"
  32.       },
  33.       {
  34.         "pagePath": "pages/course/course",
  35.         "text": "课程",
  36.         "iconPath": "/images/@2x_class_line.png",
  37.         "selectedIconPath": "/images/@2x_class.png"
  38.       },
  39.       {
  40.         "pagePath": "pages/my/my",
  41.         "text": "我的",
  42.         "iconPath": "/images/@2x_my_line.png",
  43.         "selectedIconPath": "/images/@2x_my.png"
  44.       }
  45.     ]
  46.   },
  47.   "style": "v2",
  48.   "sitemapLocation": "sitemap.json"
  49. }

1.3 删除自带的logs页面

        1、删除小程序根目录下的 app.json 文件中pages里面的logs路径配置；
        2、删除logs目录；

二、搜索框

        结合效果图和标注图，我们可以分析得出结论：搜索框区域是由两个容器组成的；
                一个外部容器 和 一个内部容器；
                外部容器包裹内部容器；而且内部容器正好在外部容器的居中(水平垂直居中)位置

        微信小程序的一个页面对应了四个文件，js文件、json文件、wxml文件、wxss文件
                wxml文件 -> html文件
                wxss文件 -> css文件
                js文件   -> js文件
                json文件 -> 配置文件
                        app.json    全局配置文件
                        index/my/course/..json文件    页面配置文件

2.1 页面结构

        1、删除index.wxml里面的demo代码；

        2、在index.wxml文件中定义两个嵌套view，布局容器的特点：宽度占据100%视口，但是高度是随着内容；
                在微信小程序中，定义布局容器使用的是view；可以在view里面定义内容；

        3、在内部view引入图片和文字；
                在微信小程序中，定义图片使用的是image组件；通过image组件的src属性引入图片；
                在微信小程序中，定义部分文字，可以使用text组件；
    
        4、有了结构之后，效果没有达到我们的预期，那么我们需要添加修饰；添加修饰，需要区分不同的元素，那么我们可以给组件添加id属性。

  1. <!-- 顶部搜索框的实现 -->
  2. <view id="searchOuterView">
  3.   <view id="searchInnerView">
  4.     <image src="/images/@2x_find.png"></image>
  5.     <text> 搜索</text>
  6.   </view>
  7. </view>

2.2 样式实现

        微信小程序的样式都是写在对应的wxss文件中；
        
        1、删除index.wxss里面的demo样式代码；

        2、搜索图片太大，我们可以给这个图片设置大小;
                通过searchInnerView查找图片
                #searchInnerView > image ->选择id为searchInnerView组件里面的image组件
                标注图里面的pt，在微信小程序使用的单位是rpx；
                1pt = 1px = 2rpx;
    
        3、给搜索文字设置大小和文字颜色；
                给搜索文本之前添加一个空格，可以让图片和文字拉开一点间距；

        4、图片和文字居中，给searchInnerView设置内容居中；

        5、给searchInnerView设置宽、高、背景颜色、边框、圆角；
    
        6、图片和文字垂直水平居中，并且对齐；    
                6.1 给searchInnerView里面的文字设置行高
                6.2 给图片和文字分别设置垂直对齐方式

        7、给searchOuterView设置内边距
                内边距：边框到内容之间的距离；

  1. /* 顶部搜索框样式 */
  2. #searchOuterView{
  3.   /* 设置内边距 */
  4.   padding: 15rpx;
  5. }
  6.  
  7. #searchInnerView{
  8.   /* 内容居中 */
  9.   text-align: center;
  10.   /* 设置宽高 */
  11.   width: 720rpx;
  12.   height: 58rpx;
  13.   /* 设置背景颜色 */
  14.   background: #EEEEEE;
  15.   /* 设置边框 */
  16.   border: 2rpx solid #ECECEE;
  17.   /* 设置边框圆角 */
  18.   border-radius: 8rpx;
  19.   /* 设置行高 */
  20.   line-height: 52rpx;
  21.   /* 设置边框包含在宽高之内 */
  22.   box-sizing: border-box;
  23. }
  24.  
  25. #searchInnerView > image{
  26.   /* 给图片设置宽和高 */
  27.   width: 36rpx;
  28.   height: 36rpx;
  29.   /* 设置垂直对齐方式 */
  30.   vertical-align: middle;
  31. }
  32.  
  33. #searchInnerView > text{
  34.   /* 给文字设置大小 */
  35.   font-size: 24rpx;
  36.   /* 给文字设置颜色 */
  37.   color: #B2B2B2;
  38.   /* 设置垂直对齐方式 */
  39.   vertical-align: middle;
  40. }

三、轮播图

3.1 页面结构

        微信小程序的轮播图特别简单即可实现，因为微信给我们提供了轮播图组件；
        swiper组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
    
        1、从swiper组件文档的最底部的wxml中复制swiper组件的相关代码；

        2、从swiper组件文档的最底部的JavaScript中复制data数据，放在index.js的data里面；
                把index.js里面原有的data数据给删掉；

        3、把swiper-item里面的view改成image，因为每个滑块展示出来的都是一张图片；

        4、swiper-item是定义在block wx:for这个语法里面,wx:for是引用的js里面data的数据，data里面对应的数组值有几个，那么就会生成几个swiper-item；
                4.1 wx:for引用的值改为imgUrls,这样是为了见名知意
                4.2 把imgUrls数组里面写成需要使用的图片的路径
                4.3 在image组件中引入对应的图片路径
    
        5、通过swiper相关属性来设置自动轮播、轮播间隔、轮播方向等；
                indicator-dots        是否显示面板指示点
                indicator-active-color        当前选中的指示点颜色
                autoplay        是否自动切换
                interval        自动切换时间间隔
                duration        滑动动画时长
                circular        是否采用衔接滑动

  1. <!-- 轮播图 -->
  2. <!-- 
  3.   swiper组件是用来定义滑块视图容器; swiper-item就是每一个滑块;
  4.   我们需要展示三张图片,三张图片的轮播,那么也就是说需要三个swiper-item
  5. -->
  6. <swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{activeColor}}" autoplay="{{autoplay}}"
  7.   interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
  8.   <!-- 
  9.     block是一个辅助性组件,它不会有任何展示效果; 
  10.     wx:for 用来定义for循环,wx:for="数组"
  11.     {{表达式}} wxml的插值表达式,从js的data里面引用值;
  12.       {{background}},从js的data中获取background对应的值
  13.     在wxml页面中需要使用的数据,我们最好都定义在data中
  14.   -->
  15.   <block wx:for="{{imgUrls}}" wx:key="*this">
  16.     <swiper-item>
  17.       <!-- swiper-item里面承载的是一张图片,不同的swiper-item承载的不同图片 -->
  18.       <image src="{{item}}"></image>
  19.     </swiper-item>
  20.   </block>
  21. </swiper>
  1. data: {
  2.     imgUrls: ['/images/img1.png', '/images/img2.png', '/images/img3.png'],
  3.     indicatorDots: true,
  4.     vertical: false,
  5.     autoplay: true,
  6.     interval: 3500,
  7.     duration: 500,
  8.     activeColor: "#fff",
  9.     circular: true
  10.   },

3.2 样式实现

        1、标注图对于轮播图区域的高度定义的是160pt，但是实际开发的时候，为了展示效果更好，调高了一些，那么我们高度使用200pt；给swiper设置高度；
    
        2、给图片设置宽、高；

  1. /* 轮播图样式 */
  2. swiper{
  3.   height: 400rpx;
  4. }
  5.  
  6. /* 选择swiper里面的后代元素image */
  7. swiper image{
  8.   width: 750rpx;
  9.   height: 400rpx;
  10. }

四、导航菜单

4.1 页面结构

        通过分析标注图，我们得出结论，一个大的view，包含了6个小的view，每个小view里面都有一个图片和文字；

        1、定义一个view，用来承载所有的导航菜单，给其定义id：navView

        2、在navView里面定义6个子view，给其定义class：navItemView

        3、在每个navItemView里面定义image和text；

  1. <!-- 导航菜单 -->
  2. <view id="navView">
  3.   <view class="navItemView">
  4.     <image src="/images/@2x_ceping.png"></image>
  5.     <text>心理测评</text>
  6.   </view>
  7.   <view class="navItemView">
  8.     <image src="/images/@2x_yuyue.png"></image>
  9.     <text>咨询预约</text>
  10.   </view>
  11.   <view class="navItemView">
  12.     <image src="/images/@2x_dayi.png"></image>
  13.     <text>心理答疑</text>
  14.   </view>
  15.   <view class="navItemView">
  16.     <image src="/images/@2x_zhishi.png"></image>
  17.     <text>心理知识</text>
  18.   </view>
  19.   <view class="navItemView">
  20.     <image src="/images/@2x_FM.png"></image>
  21.     <text>FM</text>
  22.   </view>
  23.   <view class="navItemView">
  24.     <image src="/images/@2x_gongyi.png"></image>
  25.     <text>公益中心</text>
  26.   </view>
  27. </view>

4.2 样式实现

        在微信小程序里面，所有的image都默认赋予了指定的宽高；

        1、给navItemView里面的所有图片设置宽高；

        2、给navItemView设置宽度，宽度和图片宽度一致，设置文本居中；
                view组件的特点是独占一行，及时设置了宽高；
    
        3、想要让navItemView不独占一行，有很多种方式，但是在移动端更多的是使用flex布局；
        flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
                3.1 给navView应用flex布局，采用了flex布局之后，所有的子元素都会排列在一行；
                3.2 给navView设置换行显示；
                3.3 给navItemView设置左右间距，我们称之为外边距；
                3.4 给navView设置高度。
                3.5 给navView设置多根轴线的对齐方式。

  1. /* 导航菜单样式 */
  2. #navView{
  3.   /* 应用flex布局 */
  4.   display: flex;
  5.   /* 设置换行显示 */
  6.   flex-wrap: wrap;
  7.   height: 464rpx;
  8.   /* 多轴线的垂直排列方式 */
  9.   align-content:space-around;
  10.   font-size: 26rpx;
  11.   /* 字体加粗 */
  12.   font-weight: bold;
  13. }
  14.  
  15. .navItemView{
  16.   width: 150rpx;
  17.   text-align: center;
  18.   /* 设置左右外边距 */
  19.   margin: 0 50rpx;
  20. }
  21.  
  22. .navItemView > image{
  23.   width: 150rpx;
  24.   height: 150rpx;
  25. }

五、在线客服

        理念：不要添加无意义的组件或标签；

        给页面添加一个整体的灰色背景色，然后给必要的组件添加白色背景；

5.1 页面结构

        1、定义一个view，用来承载在线客服相关内容，给其定义id：onlineView
    
        2、在onlineView定义图片、文本；

  1. <!-- 在线客服 -->
  2. <view id="onlineView">
  3.   <image src="/images/@2x_zixunpeixun.png"></image>
  4.   <text> 咨询助理在线客服</text>
  5.   <!-- 右箭头实现 -->
  6.   <view class="arrow"></view>
  7. </view>

5.2 样式实现

        1、给onlineView里面的图片设置宽、高；

        2、给onlineView设置高度、背景颜色、上下外边距、左右内边距、设置行高；

        3、给onlineView文本设置字体大小、字体加粗；
                设计图上的24pt有点问题，我们只需要26rpx即可；
                记得把导航菜单里面的字体也改成26rpx 加粗；

        4、图片和文字对齐；

右箭头实现

        右箭头的实现：一个正方形、定义上边框和右边框、旋转45度、然后通过定位放到指定位置；

        给arrow元素设置 position: absolute; 使用绝对定位，绝对定位是相对于父元素进行定位，前提父元素必须具有定位属性。
        给#onlineView设置position: relative; 让父元素具有定位属性；

  1. /* 在线客服样式 */
  2. #onlineView{
  3.   height: 88rpx;
  4.   background: #fff;
  5.   /* 设置上下外边距 */
  6.   margin: 24rpx 0;
  7.   /* 设置左右内边距 */
  8.   padding: 0 30rpx;
  9.   line-height: 88rpx;
  10.   position: relative;
  11. }
  12.  
  13. #onlineView > image{
  14.   width: 60rpx;
  15.   height: 60rpx;
  16.   vertical-align: middle;
  17. }
  18.  
  19. #onlineView > text{
  20.   font-size: 26rpx;
  21.   /* 字体加粗 */
  22.   font-weight: bold;
  23.   vertical-align: middle;
  24. }
  25.  
  26. /* 右箭头的实现原理: 一个正方形,定义上/右边框,旋转45度 */
  27. .arrow{
  28.   width: 16rpx;
  29.   height: 16rpx;
  30.   border-top: 4rpx solid #999;
  31.   border-right: 4rpx solid #999;
  32.   /* 旋转45度 */
  33.   transform: rotate(45deg);
  34.   /* 调整位置 */
  35.   position: absolute;
  36.   right: 30rpx;
  37.   top: 38rpx;
  38. }

六、精选文章

6.1 页面结构

        1、定义view，用来承载文章标题、所有文章列表、查看更多；给其添加id：hotArticleView

        2、定义view，用来承载文章总标题，给其添加id：hotArticleTitleView

        3、定义三个view，用来承载三个精选文章列表，这三个view，效果都是一样的，区别点在于图片和文字不同；给这三个view添加class：articleView
    
        4、在articleView里面分了左右两部分
                4.1 在articleView定义两个子view；左边承载图片，右边承载文字；给右侧的view添加class：articleContent；
                4.2 在articleContent分为上下两部分，定义两个子view，分别添加class：articleTitle、articleDesc；

        5、定义view，用来表示查看更多，给其添加id：moreView
                在这个view里面定义文本和右箭头

  1. <!-- 精选文章 -->
  2. <view id="hotArticleView">
  3.   <!-- 文章总标题 -->
  4.   <view id="hotArticleTitleView">
  5.     精选文章
  6.   </view>
  7.   <!-- 文章列表 -->
  8.   <view class="articleView">
  9.     <view>
  10.       <image src="/images/article01.png"></image>
  11.     </view>
  12.     <view class="articleContent">
  13.       <view class="articleTitle">
  14.         你活出自我的样子,真美
  15.       </view>
  16.       <view class="articleDesc">
  17.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  18.       </view>
  19.     </view>
  20.   </view>
  21.   <view class="articleView">
  22.     <view>
  23.       <image src="/images/article02.png"></image>
  24.     </view>
  25.     <view class="articleContent">
  26.       <view class="articleTitle">
  27.         你活出自我的样子,真美
  28.       </view>
  29.       <view class="articleDesc">
  30.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  31.       </view>
  32.     </view>
  33.   </view>
  34.   <view class="articleView">
  35.     <view>
  36.       <image src="/images/article03.png"></image>
  37.     </view>
  38.     <view class="articleContent">
  39.       <view class="articleTitle">
  40.         你活出自我的样子,真美
  41.       </view>
  42.       <view class="articleDesc">
  43.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  44.       </view>
  45.     </view>
  46.   </view>
  47.  
  48.   <!-- 查看更多 -->
  49.   <view id="moreView"> 
  50.     <text>查看更多</text>
  51.     <view class="arrow"></view>
  52.   </view>
  53. </view>

6.2 样式实现

        1、给hotArticleView添加左右内边距、背景颜色；

        2、给hotArticleTitleView设置高度、字体大小、字体粗细；下边框、行高；

        3、给articleView 里面的图片设置大小；

        4、给articleView应用flex布局、上下内边距、下边框；

        5、给articleView 里面的图片设置右外边距；

        6、给右侧文章标题和描述内容分别设置文字大小、颜色、行高；
                文章标题设置28rpx；

        7、给moreView设置高度、行高、相对定位；

        8、给moreView里面的文字设置大小、颜色；

        9、给hotArticleView添加下外边距；

  1. /* 精选文章 */
  2. #hotArticleView{
  3.   padding: 0 30rpx;
  4.   background: #fff;
  5.   margin-bottom: 24rpx;
  6. }
  7.  
  8. #hotArticleTitleView{
  9.   height: 88rpx;
  10.   font-size: 30rpx;
  11.   font-weight: bold;
  12.   border-bottom: 1rpx solid #F1F1F1;
  13.   line-height: 88rpx;
  14. }
  15.  
  16. .articleView {
  17.   display: flex;
  18.   padding: 30rpx 0;
  19.   border-bottom: 1rpx solid #F1F1F1;
  20. }
  21.  
  22. .articleView image{
  23.   width: 120rpx;
  24.   height: 120rpx;
  25.   margin-right: 20rpx;
  26. }
  27.  
  28. .articleTitle{
  29.   font-size: 28rpx;
  30.   font-weight: bold;
  31.   line-height: 50rpx;
  32. }
  33.  
  34. .articleDesc{
  35.   font-size: 26rpx;
  36.   color: #A9A9A9;
  37.   line-height: 35rpx;
  38. }
  39.  
  40. #moreView{
  41.   height: 88rpx;
  42.   line-height: 88rpx;
  43.   font-size: 28rpx;
  44.   color: #A6A6A6;
  45.   position: relative;
  46. }

七、请求回答

7.1 页面结构

        定义一个view，给其添加id：askView，在其中定义一张图片；

  1. <!-- 请求回答 -->
  2. <view id="askView">
  3.   <image src="/images/@2x_fudong.png"></image>
  4. </view>

7.2 样式实现

        1、设置图片的大小

        2、给askView添加固定定位（无论页面内容怎么滚动，元素一致在窗口的指定位置），设置对应的位置即可；

  1. /* 请求回答 */
  2. #askView{
  3.   position: fixed;
  4.   bottom: 100rpx;
  5.   right: 10rpx;
  6. }
  7.  
  8. #askView > image{
  9.   width: 100rpx;
  10.   height: 100rpx;
  11. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/113890?site
推荐阅读
相关标签

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

  

闽ICP备14008679号