微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
来源:互联网 发布:淘宝网帽子女包头帽 编辑:程序博客网 时间:2024/05/17 00:55
详情 - 页面制作
本文配套视频地址:
https://v.qq.com/x/page/o0555o20xjd.html
开始前请把
ch4-1
分支中的code/
目录导入微信开发工具
这一章节中,主要介绍详情页的页面制作过程
首先看一下我们最终要展示的页面
页面结构大体分为三部分,也是最常见的布局方式:头部、中间体、尾部。最顶部的是页面 title
,也就是标题,如果是一般的页面,我们只需要在 detail.json
中增加如下配置即可: "navigationBarTitleText": "Quora精选:为什么聪明人总能保持冷静"
但我们制作的详情页面信息是随着文章内容一直变化的,所以需要在代码中单独处理,就不需要在 detail.json
中添加
这里,我们先制作出:头部和尾部。中间的内容部分,会由 parse.js
解析文章数据生成。
开始之前,我们先修改 app.wxss
文件,引入需要用到的公用样式表和第三方样式
@import "./styles/base.wxss";@import "./lib/wxParse/wxParse.wxss";.green{ color: #26b961;}page{ height: 100%; background-color: #f8f8f8;}
Step 1. 页面准备
- 由于文章需要上下滚动,我们采用
scroll-view
组件来包括整个页面内容
<!-- detail.html --><scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap"></scroll-view>
scroll-view 组件,相当于我们在常规的 div
标签上增加了滚动功能并进行封装
- 然后调整下页面的高度和背景色
/* detail.css */ page { background: #fbfbfb; height: 100% } .root-wrap { height: 100% }
Step 2. 页面头部制作
- 头部包含三块内容:大标题、左浮动显示作者、右浮云显示日期,制作如下:
<!-- detail.html --> <scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap"> <view class="wrapper"> <view class="info"> <view class="info-title">Quora精选:为什么聪明人总能保持冷静</view> <view class="info-desc cf"> <text class="info-desc-author fl">哈利波特</text> <text class="info-desc-date fr">2017/06/27</text> </view> <view class="info-line under-line"></view> </view> </view> </scroll-view>
- 对应样式文件,注意:
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: 0 36rpx } .wrapper .info-title { padding: 40rpx 0; line-height: 60rpx; font-size: 44rpx; font-weight: 500; color: #333 } .wrapper .info-desc { font-size: 28rpx; line-height: 30rpx; color: #c1c1c1 } .wrapper .info-desc-author { max-width: 65%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .wrapper .info-line { margin-top: 24rpx }
Step 3. 页面尾部制作
页尾类似于于菜单导航功能,用户可以进入
下一篇
或返回
列表,并且当页面滚动时候,固定在底部不动
修改页面 detail.html
<!-- 增加以下内容,footbar节点与info节点平级 --> <view class="footbar"> <form> <button class="footbar-back clearBtnDefault"> <view class="icon footbar-back-icon"></view> </button> <button class="footbar-btn clearBtnDefault">下一篇</button> <button class="footbar-share clearBtnDefault"> <view class="icon footbar-share-icon"></view> </button> </form> </view>
修改样式表
/* detail.css 增加以下样式内容 */ .wrapper .footbar { position: fixed; left: 0; bottom: 0; width: 100%; height: 96rpx; line-height: 96rpx; background: #fff; font-size: 32rpx; color: #333 } .wrapper .footbar-back,.wrapper .footbar-share { position: absolute; width: 96rpx; height: 96rpx; bottom: 0; z-index: 2 } .wrapper .footbar .icon { position: absolute; width: 42rpx; height: 38rpx; top: 30rpx } .wrapper .footbar-back { left: 0 } .wrapper .footbar-back-icon { left: 30rpx; background: url(https://n1image.hjfile.cn/mh/2017/06/06/1305a8ac4dc9347b59cc8c2c667122e5.png) 0 0 no-repeat; background-size: contain } .wrapper .footbar-list { left: 0 } .wrapper .footbar-list-icon { left: 30rpx; background: url(https://n1image.hjfile.cn/mh/2017/06/09/1e630ac45547e6ab5260928e1d57a3c6.png) 0 0 no-repeat; background-size: contain } .wrapper .footbar-btn { text-align: center; margin: 0 96rpx; height: 96rpx; line-height: 96rpx } .wrapper .footbar-share { right: 0 } .wrapper .footbar-share-icon { right: 30rpx; background: url(https://n1image.hjfile.cn/mh/2017/06/09/ebc3852fb865bd19182c09ca599d8ac1.png) 0 0 no-repeat; background-size: contain } .wrapper .clearBtnDefault { margin: 0; padding: 0; background: #fff; border: 0; border-radius: 0 } .wrapper .clearBtnDefault:after { content: ''; border: none; border-radius: 0; width: 0; height: 0 }
页面尾部制作完成,下一步我们将处理中间的文章内容部分。
Step 4. 为中间的 content 内容预留位置
完整的页面代码如下
<scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap"> <view class="wrapper"> <view class="info"> <view class="info-title">Quora精选:为什么聪明人总能保持冷静</view> <view class="info-desc cf"> <text class="info-desc-author fl">哈利波特</text> <text class="info-desc-date fr">2017/06/27</text> </view> <view class="info-line under-line"></view> </view> <!-- 增加正文视图位置 --> <view class="content"> 文章正文 </view> <view class="footbar"> <form> <button class="footbar-back clearBtnDefault"> <view class="icon footbar-back-icon"></view> </button> <button class="footbar-btn clearBtnDefault">下一篇</button> <button class="footbar-share clearBtnDefault"> <view class="icon footbar-share-icon"></view> </button> </form> </view> </view> </scroll-view>
iKcamp官网:http://www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
【11月11号】上海iKcamp最新活动
报名地址:http://www.huodongxing.com/event/5409924174200
与
“天天练口语”
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
- 微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染
- 微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作
- 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇
- 微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联
- 微信小程序教学第二章:小程序中级实战教程之预备篇
- 微信小程序教学视频
- iKcamp出品微信小程序教学共5章16小节汇总(含视频)
- 全栈工程师之路-中级篇之小程序开发-第三章第一节页面跳转及参数传递,跳转到更多页面
- 微信小程序实战篇-分类页面制作
- 微信小程序实战篇-分类页面制作
- 微信小程序实战篇-分类页面制作
- 微信小程序免费教学视频
- 全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序
- IntelliJ IDEA 创建maven springmvc 简单项目
- NoSQL简介
- (c#) 销毁资源和释放内存
- 3D数学 学习笔记(7) 视图、视锥、视场(Field of View)、裁切空间、屏幕空间
- tp3.2下支付宝即时到账开发的一种方式
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
- c#访问Oracle数据库,执行数据库操作
- 使用PowerDesigner生成数据库测试数据
- Looper如何和一个线程进行绑定,以及Android中的Can't create handler inside thread that has not called Looper.prepare()
- ionic3 实现扫码功能
- MYSQL创建数据库,切换数据库,创建表,给表添加属性,
- Java后台接收js数组对象,并解析
- Pattern用法(正则表达式)
- C/C++零碎知识点