微信小程序文章詳情頁面實(shí)現(xiàn)代碼
先自己繪制了一個(gè)丑陋的原型圖，然后開始在小程序上繪制頁面，然后設(shè)計(jì)樣式，一路過來總結(jié)就是哪里不懂查哪里之旅~
原型設(shè)計(jì)和分析
原型圖效果
文章詳情.png
為什么要這么設(shè)計(jì)？
正常情況下是設(shè)計(jì)先出設(shè)計(jì)圖，然后服務(wù)器和我們一同討論接口如何設(shè)計(jì)，然后根據(jù)服務(wù)器返回的結(jié)果，我們再去界面上顯示。但是這里我們使用的是第三方的接口，所以只能他有什么我們顯示什么了。
服務(wù)器接口返回的數(shù)據(jù)如下如：
小程序-服務(wù)器返回結(jié)果.png
分析 json 結(jié)果，我們這里為了簡單，也就只顯示幾個(gè)元素分別是 時(shí)間,標(biāo)題，類型，作者，圖片 。
整體是垂直排列，然后圖片是根據(jù)是否有返回來動(dòng)態(tài)顯示，最后的心形圖標(biāo)是為了收藏使用（目前還未實(shí)現(xiàn)收藏功能）
原型實(shí)現(xiàn)
在實(shí)現(xiàn)的過程中一步步思考，首先是頁面如何實(shí)現(xiàn)，然后是數(shù)據(jù)如何獲取，最后是如何動(dòng)態(tài)顯示數(shù)據(jù)
頁面實(shí)現(xiàn)
從原型圖分析，我們的根布局需要能夠整體垂直滑動(dòng)，然后圖片水平顯示三行（后來實(shí)現(xiàn)的時(shí)候發(fā)現(xiàn)水平顯示圖片，圖片太小不美觀，故改成圖片整體垂直擺放）
詳情頁面的整體布局 reading-detail.wxml
<view>
<view class='top-text'>
<text>web-view 組件是一個(gè)可以用來承載網(wǎng)頁的容器，會(huì)自動(dòng)鋪滿整個(gè)小程序頁面。個(gè)人類型與海外類型的小程序暫不支持使用。</text>
</view>
<view class="divLine"></view>
<view>
<view class='content-text'>
<text>{{content}}</text>
</view>
<view class='image-container'>
<block wx:for="{{images}}" wx:for-item="item" wx:for-index="idx">
<view class='image-container' catchtap='onImageClick' data-imageUrl="{{item.imageUrl}}">
<image wx:if="{{hadImage}}" class='image-item' src="{{item.imageUrl}}" mode='widthFix'></image>
</view>
</block>
</view>
<view>
<text class='type-text'>類型：{{postType}}</text>
<text class='type-author'>作者：{{who}}</text>
</view>
<view><text class='type-date'>發(fā)布時(shí)間：{{date}}</text></view>
<view><text class='url-text'>網(wǎng)頁鏈接：{{url}}</text></view>
<view class='view-like' catchtap='onLikeClick'>
<image class='icon-like' src='/images/detail/icon_like.png'></image>
</view>
</view>
</view>
布局還算好做的，難點(diǎn)就在于頁面的樣式如何去調(diào)整（難也是相對新手，比如我這種小白吧）
詳情頁面的樣式文件 wxss
.scroller-container{
height: 1300rpx;
}
.top-text{
font-size: 24rpx;
color: #999;
margin-left: 20rpx;
margin-right: 20rpx;
}
.divLine{
background: #D1D1D6;
width: 100%;
height: 2px;
margin: 20rpx;
}
.content-text{
margin: 20rpx;
font-size: 40rpx;
font-weight: 600rpx;
color: #333;
}
.image-container{
display: flex;
flex-direction: column;
width: 100%;
height: auto;
margin: 20rpx;
}
.image-item{
width: 100%;
height: 600rpx;
padding-bottom: 20rpx;
}
.view-like{
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
}
.icon-like{
width: 128rpx;
height: 128rpx;
margin-top: 20rpx;
}
.type-text{
margin-left: 10rpx;
font-size: 30rpx;
}
.url-text{
margin-left: 10rpx;
font-size: 24rpx;
}
.type-author{
margin-left: 10rpx;
font-size: 30rpx;
}
.type-date{
margin-left: 10rpx;
font-size: 30rpx;
}
在實(shí)現(xiàn)心形圖標(biāo)居中過程中 align-items: center;(交叉軸上的對齊方式) 沒居中顯示，查了下是需要設(shè)置顯示為水平擺放，然后還需要設(shè)置 justify-content: center;(表示在主軸上的對齊方式) 這里有一篇文章介紹微信小程序布局挺好的微信小程序布局基礎(chǔ)
數(shù)據(jù)獲取
通過上一個(gè)頁面?zhèn)鬟f過來，目前是用最簡單的 url 傳值的形式傳遞
在 reading.js 文件中的點(diǎn)擊事件傳遞數(shù)據(jù)
/**
* item 的點(diǎn)擊事件
*/
onGankTap:function(event){
var url = event.currentTarget.dataset.posturl;
var desc = event.currentTarget.dataset.postdesc;
var postType = event.currentTarget.dataset.posttype;
var who = event.currentTarget.dataset.postwho;
var date = event.currentTarget.dataset.postdate;
var images = event.currentTarget.dataset.postimages;
wx.navigateTo({
url: "reading-detail/reading-detail?url=" + url + "&content=" + desc + "&type=" + postType + "&who=" + who + "&date=" + date +"&images="+images
})
},
在 reading-detail.js 文件中接受傳遞過來的數(shù)據(jù)，并對數(shù)據(jù)處理
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var url = options.url;
var content = options.content;
var postType = options.type;
var who = options.who;
var date = options.date;
var images = options.images.split(',');
var imageArray = [];
var hadImage = false ;
for (var i = 0; i < images.length; i++) {
// 圖片不為空則存到數(shù)組中
if (images[i] != "undefined"){
var obj = {
imageUrl: images[i],
}
imageArray.push(obj);
}
}
// 是否有圖片
if (imageArray.length > 0) {
hadImage = true;
} else {
hadImage = false;
}
// 傳遞數(shù)據(jù)給ui顯示
this.setData({
url: url,
content: content,
date: date,
postType: postType,
who: who,
images: imageArray,
hadImage: hadImage
})
// 標(biāo)題
wx.setNavigationBarTitle({
title: "文章詳情"
})
},
數(shù)據(jù)動(dòng)態(tài)填充
通過判斷語句動(dòng)態(tài)判斷控制圖片顯示的變量是否有值，有則顯示圖片組件，沒有則不顯示圖片組件。
在 reading-detail.wxml 中通過判斷語句判斷是否顯示圖片組件, hadImage 是 js 中傳遞過來的值
ok，查看文章詳情功能到這里了（詳情頁最好是直接用 web-view 展示，但是個(gè)人開發(fā)不支持 web-view 組件）。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能(附源碼下載)
dropzone.js是重量輕的JavaScript庫，將HTML元素設(shè)置為一個(gè)降落區(qū),并通過Ajax文件被上傳到服務(wù)器。本文給大家詳細(xì)介紹Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能，需要的朋友參考下吧2016-11-11
JavaScript通過RegExp實(shí)現(xiàn)客戶端驗(yàn)證處理程序
通過RegExp實(shí)現(xiàn)客戶端驗(yàn)：讓文本框只允許輸入數(shù)字、文本框只允許輸入中文、郵箱輸入格式的判斷等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
getElementByIdx_x js自定義getElementById函數(shù)
最近看JS代碼，發(fā)現(xiàn)不少人問getElementByIdx_x是什么函數(shù)，其實(shí)就是個(gè)getElementById自定義函數(shù)2012-01-01
JavaScript隨機(jī)數(shù)的組合問題案例分析
這篇文章主要介紹了JavaScript隨機(jī)數(shù)的組合問題,結(jié)合具體案例形式分析了JavaScript隨機(jī)數(shù)的組合問題相關(guān)算法原理、實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript中值類型與引用類型說明，需要的朋友可以參考下。2010-12-12
javascript+Canvas實(shí)現(xiàn)畫板功能
這篇文章主要為大家詳細(xì)介紹了javascript+Canvas實(shí)現(xiàn)畫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
js表達(dá)式計(jì)算器代碼，需要的朋友可以參考下。2011-10-10
js實(shí)現(xiàn)圖片推拉門效果代碼實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)圖片推拉門效果代碼實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
輸入內(nèi)容活直接點(diǎn)轉(zhuǎn)換即可，講單詞的首字母大寫。2008-09-09
JavaScript實(shí)現(xiàn)與web通信的方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)與web通信的方法詳解，文章通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08