(编辑：jimmy 日期: 2024/10/31 浏览：2)
本文实例讲述了微信小程序文章详情功能。分享给大家供大家参考，具体如下：
接着上一篇
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"htmlcode">
<!--pages/article-detail/detail.wxml-->
<view>
<image src="/UploadFiles/2021-04-02/sls.jpg">
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 () {
}
})
希望本文所述对大家微信小程序设计有所帮助。