摘要:詳情頁面制作本文配套視頻地址開始前請把分支中的目錄導入微信開發工具這一章節中,主要介紹詳情頁的頁面制作過程首先看一下我們最終要展示的頁面頁面結構大體分為三部分,也是最常見的布局方式頭部中間體尾部。
詳情 - 頁面制作
本文配套視頻地址:
https://v.qq.com/x/page/o0555...
開始前請把 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 組件來包括整個頁面內容
scroll-view 組件,相當于我們在常規的 div 標簽上增加了滾動功能并進行封裝
然后調整下頁面的高度和背景色
/* detail.css */ page { background: #fbfbfb; height: 100% } .root-wrap { height: 100% }Step 2. 頁面頭部制作
頭部包含三塊內容:大標題、左浮動顯示作者、右浮云顯示日期,制作如下:
Quora精選:為什么聰明人總能保持冷靜 哈利波特 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: 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
修改樣式表
/* 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 }
頁面尾部制作完成,下一步我們將處理中間的文章內容部分。
完整的頁面代碼如下
Quora精選:為什么聰明人總能保持冷靜 哈利波特 2017/06/27 文章正文
iKcamp官網:http://www.ikcamp.com
訪問官網更快閱讀全部免費分享課程:《iKcamp出品|全網最新|微信小程序|基于最新版1.0開發者工具之初中級培訓教程分享》。
包含:文章、視頻、源代碼
【11月11號】上海iKcamp最新活動iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。
報名地址:http://www.huodongxing.com/ev...
與“天天練口語”小程序總榜排名第四、教育類排名第一的研發團隊,面對面溝通交流。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51451.html
摘要:詳情頁面制作本文配套視頻地址開始前請把分支中的目錄導入微信開發工具這一章節中,主要介紹詳情頁的頁面制作過程首先看一下我們最終要展示的頁面頁面結構大體分為三部分,也是最常見的布局方式頭部中間體尾部。 詳情 - 頁面制作 本文配套視頻地址:https://v.qq.com/x/page/o0555... 開始前請把 ch4-1 分支中的 code/ 目錄導入微信開發工具 這一章節中,主...
摘要:詳情頁面制作本文配套視頻地址開始前請把分支中的目錄導入微信開發工具這一章節中,主要介紹詳情頁的頁面制作過程首先看一下我們最終要展示的頁面頁面結構大體分為三部分,也是最常見的布局方式頭部中間體尾部。 詳情 - 頁面制作 本文配套視頻地址:https://v.qq.com/x/page/o0555... 開始前請把 ch4-1 分支中的 code/ 目錄導入微信開發工具 這一章節中,主...
摘要:微信小程序課程,面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節,適合七天的訓練營。 ?? 微信小程序課程,面向所有具備前端基礎知識的同學 ?? 閱讀要求 讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節,適合七天的訓練營。 從現在開始,我假裝你已經掌握了 html、 css以及 ES6...
摘要:微信小程序課程,面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節,適合七天的訓練營。 ?? 微信小程序課程,面向所有具備前端基礎知識的同學 ?? 閱讀要求 讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節,適合七天的訓練營。 從現在開始,我假裝你已經掌握了 html、 css以及 ES6...
摘要:微信小程序課程,面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節,適合七天的訓練營。 ?? 微信小程序課程,面向所有具備前端基礎知識的同學 ?? 閱讀要求 讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節,適合七天的訓練營。 從現在開始,我假裝你已經掌握了 html、 css以及 ES6...
閱讀 1698·2021-10-28 09:32
閱讀 605·2021-09-24 09:47
閱讀 2920·2021-09-02 15:11
閱讀 2733·2021-08-09 13:46
閱讀 2884·2019-08-30 15:55
閱讀 1071·2019-08-30 15:54
閱讀 3300·2019-08-29 14:12
閱讀 805·2019-08-26 13:40