甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇文章主要讲解了微信小程序文章详情功能的代码实例解析，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
成都创新互联专业为企业提供岳池网站建设、岳池做网站、岳池网站设计、岳池网站制作等企业网站建设、网页设计与制作、岳池企业网站模板建站服务，十载岳池做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
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
/* pages/article-detail/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 () {
}
})看完上述内容，是不是对微信小程序文章详情功能的代码实例解析有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。