本文实例讲述了微信小程序文章详情功能。分享给大家供大家参考，具体如下：
接着上一篇
https://www.jb51.net/article/187900.htm
list.js 首先获取文章的id，因为我们的数据是假数据所以用key值作为文章id
onPostTap: function (event) {
var article_id = event.currentTarget.dataset.aid;
wx.navigateTo({
url: '../article-detail/detail?aid=' + article_id,
})
},
detail.wxml
{{detail.avatar}} 发表于 {{detail.date}} {{detail.title}} {{detail.content}} 上一篇：啊啊啊啊啊啊啊 下一篇：哈哈哈哈哈
detail.wxss
.detail-img {
width: 100%;
height: 400rpx;
}
.avatar {
overflow: hidden;
}
.avatar image {
float: left;
width: 100rpx;
height: 100rpx;
margin-left: 20rpx;
}
.avatar image:nth-child(4) {
float: right;
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
.avatar image:nth-child(5) {
float: right;
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
.avatar text {
float: left;
font-size: 30rpx;
height: 100rpx;
line-height: 100rpx;
padding-left: 15rpx;
}
.avatar text:nth-child(3) {
font-size: 25rpx;
color: gainsboro;
}
.title {
width: 100%;
clear: both;
}
.title text {
display: flex;
justify-content: center;
align-items: center;
color: rgb(171, 211, 224);
font-size: 50rpx;
}
.content{
color:#666;
letter-spacing: 2rpx;
margin-top:20rpx;
padding-left:20rpx;
padding-right:20rpx;
line-height:40rpx;
font-size:25rpx;
text-indent:50rpx;
}
.pre-next{
margin-top:20rpx;
}
.pre{
float:left;
margin-left:20rpx;
font-size: 25rpx;
color:rgb(171, 211, 224);
padding-bottom: 20rpx;
}
.next{
float: right;
margin-right:20rpx;
font-size: 25rpx;
color:rgb(171, 211, 224);
padding-bottom: 20rpx;
}
detail.js
// pages/article-detail/detail.js
var articleData = require("/../../data/article-data.js");
Page({
data: {
},
onLoad: function (options) {
//获取文章的id
var aid = options.aid;
var article = articleData.data[aid];
this.setData({detail:article});
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
希望本文所述对大家微信小程序设计有所帮助。
