微信小程序教学第4章第1节（含视频）：小程序中级实战教程：详情-页面创建

详情-页面创建本文视频地址：https://v.qq.com/x/page/o0555...开始前请将ch4-1分支的code/目录导入微信开发工具。本章主要介绍详情页的页面创建过程。首先我们来看一下我们最终要展示的页面结构。三部分也是最常见的布局：头部、中部和尾部。最上面是页面的标题，也就是标题。如果是普通页面，我们只需要在detail.json中添加如下配置："navigationBarTitleText":"知乎精选：为什么聪明人总是保持冷静"但是我们创建的详情页信息会随着文章内容的变化而变化，所以需要在代码中单独处理，不需要在detail.json中添加这个。让我们先做：头部和尾部。中间的内容部分将由parse.js解析文章数据生成。在开始之前，我们先修改app.wxss文件，引入需要用到的公共样式表和第三方样式@import"./styles/base.wxss";@import"./lib/wxParse/wxParse.wxss”;.绿色{颜色：#26b961；}页面{高度：100%；background-color:#f8f8f8;}Step1.页面准备由于文章需要上下滚动，我们使用scroll-view组件来包含整个页面内容scroll-view组件，相当于我们在正则中添加了一个滚动功能div标签并封装，然后调整页面的高度和背景色/*detail.css*/page{background:#fbfbfb;height:100%}.root-wrap{height:100%}Step2.制作页眉。header包含三块内容：标题，左边漂浮的作者，右边漂浮的日期。制作如下：知乎精选：为什么聪明人总能保持冷静哈利波特2017/06/27对应的样式文件，注意：fl(float:left),fr(float:right),cf(clear:float)是base.wxss中设置的全局样式/*detail.css*/page{background:#fbfbfb;height:100%}.root-wrap{height:100%}.wrapper{padding-bottom:96rpx}.wrapper.top-img{width:100%;height:470rpx;vertical-align:top}.wrapper.info{padding:036rpx}.wrapper.info-title{padding:40rpx0;line-height:60rpx;font-size:44rpx;font-weight:500;color:#333}.wrapper.info-desc{font-size:28rpx；行高：30rpx；颜色：#c1c1c1}.wrapper.info-desc-author{最大宽度：65%；文本溢出：省略号；空白：nowrap；溢出：隐藏}.wrapper.info-line{margin-top:24rpx}Step3.在页尾做一个页脚，类似菜单导航功能，用户可以进入下一篇文章或返回返回列表，页面滚动时固定在底部，修改页面detail.html