1、跳轉到文章詳情頁面
新建詳情頁面（使用自動生成方法）
image.png
1.1 注冊跳轉文章詳情頁面事件
post.wxml
image.png
1.2 跳轉到文章詳情頁面
post.js
onTapToDetail(event){
wx.navigateTo({
url: 'post-detail/post-detail',
})
}
image.png
2、不要在template上注冊事件
image.png
template標簽僅僅是一個占位符，在編譯 后會被template的模板內(nèi)容替換
2.1 在block上注冊事件
post.wxml
image.png
image.png
2.2 增加view容器包裹template模板
post.wxml
image.png
image.png
3、頁面間傳遞參數(shù)的3中方式
1）使用全局變量
2）使用緩存
3）通過頁面導航url的query參數(shù)傳遞
第一個、第二個都涉及到了全局變量；下面主要介紹第三種的用法
3.1 組件的自定義屬性
3.1.1 綁定postId
post.wxml
image.png
image.png
3.2 通過dataset獲取組件自定義屬性
3.2.1 綁定postId
post.js
onTapToDetail(event){
var postId = event.currentTarget.dataset.postId;
console.log(postId);
wx.navigateTo({
url: 'post-detail/post-detail?id='+postId,
})
}
- 組件自定義屬性名有如下故則：
1）必須以data-開頭
2）多個單詞由連字符“-”連接
3）單詞中最好不要有大寫字母，如果有大寫字母，除了第一個字母外，其余大寫 字母將被轉化成小寫
4）在js中獲取自定義屬性值時，多個單詞將被轉換駝峰命名
- 示例如下：
data-post ================> dataset.post
data-post-id ================> dataset.postId
data-pOST-ID ================> dataset.postId
data-postId ================> dataset.postid
3.3 獲取頁面參數(shù)值
3.3.1 獲取頁面參數(shù)值
post-detail.js
g
image.png
4、編譯時設置初始化頁面及參數(shù)
每次保存一次都會刷新頁面，回到初始化歡迎頁面，如果開發(fā)的時候希望在可以直接編譯到文章詳情頁面，可以按照下面的所示執(zhí)行
image.png
image.png
image.png
image.png
5、讀取文章詳情數(shù)據(jù)
根據(jù)列表頁面?zhèn)鬟f過來的文章Id，去緩存中獲取對應的數(shù)據(jù)
5.1 新增getPostItemById方法
DBPostl.js
image.png
5.2 獲取指定id號的文章數(shù)據(jù)
post-detail.js
import { DBPost } from '../../../db/DBPost.js';
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var postId = options.id;
this.dbPost = new DBPost(postId);
this.postData = this.dbPost.getPostItemById().data;
this.setData({
post:this.postData
})
},
image.png
6、編寫文章詳情頁面
6.1 編寫詳情頁面骨架
post-detail.wxml
<view class='container'>
<image class='head-image' src='{{post.postImg}}'></image>
<text class='title'>{{post.title}}</text>
<view class='author-date'>
<view class='author-box'>
<image class='avatar' src='{{post.avatar}}'></image>
<text class='author'>{{post.author}}</text>
</view>
<text class='date'>{{post.dateTime}}</text>
</view>
<text class='detail'>{{post.detail}}</text>
</view>
6.2 編寫詳情頁面的樣式
post-detail.wxss
/* pages/post/post-detail/post-detail.wxss */
.container {
display: flex;
flex-direction: column;
}
.head-image {
width: 750rpx;
height: 460rpx;
}
.title {
font-size: 20px;
margin: 30rpx;
letter-spacing: 2px;
color: #4b556c;
}
.author-date {
display: flex;
flex-direction: row;
margin-top: 15rpx;
margin-left: 30rpx;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
.author-box {
display: flex;
flex-direction: row;
align-items: center;
}
.avatar {
height: 50rpx;
width: 50rpx;
}
.author {
font-weight: 300;
margin-left: 20rpx;
color: #666;
}
.date {
color: #919191;
margin-left: 39rpx;
}
.detail {
color: #666;
margin: 40rpx 22rpx 0;
line-height: 44rpx;
letter-spacing: 1px;
font-size: 14px;
}
image.png
-
justify-content 屬性注意點
image.png
image.png
7、垂直居中問題的經(jīng)典解決方法
7.1文字和圖片垂直居中對齊
post-detail.wxss
.author-box {
display: flex;
flex-direction: row;
align-items: center;
}
.avatar {
height: 50rpx;
width: 50rpx;
}
.author {
font-weight: 300;
margin-left: 20rpx;
color: #666;
}
image.png
小程序?qū)猣lex的支持相當完善，建議多使用flex進行元素布局
8、動態(tài)設置導航欄標題
8.1 使用配置文件配置導航欄標題
8.1.1 配置全局導航欄文字
app.json
"window": {
"navigationBarBackgroundColor": "#4A6141",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "標 題"
}
運行之后可以看到，所有的頁面的導航欄都增加了“標題”,這倆個子，這不是我們想要的，我們一般希望在不同的頁面顯示不同標題
image.png
8.1.2 配置當個頁面導航欄文字
post.json
{
"navigationBarTextStyle": "white",
"navigationBarTitleText": "標 題"
}
這樣，導航欄文字只會在post頁面中出現(xiàn)
8.2 使用wx.setNavigationBarTitle（OBJECT）設置導航條
8.2.1 動態(tài)設置導航欄文字
post-detail.js
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
wx.setNavigationBarTitle({
title:this.postData.title
})
},
在122100版本之前，在onShow方法設置，會出現(xiàn)一閃而過的情況，官方建議：對界面的設置，如wx.setNavigationBarTitle請在onReady之后設置
但是在130400版本之后，不會出現(xiàn)這個問題，因此要時常關注開發(fā)文檔的說明
