微客导航 » 文章资讯 » 微信小程序文章详情功能完整实例

微信小程序文章详情功能完整实例

2023-07-23 19:51:05 325

本文实例讲述了微信小程序文章详情功能。分享给大家供大家参考，具体如下：

接着上一篇

https://www.nhooo.com/article/187900.htm

list.js 首先获取文章的id，因为我们的数据是假数据所以用key值作为文章id

onPostTap:function(event){
vararticle_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;
}

.avatarimage{
float:left;
width:100rpx;
height:100rpx;
margin-left:20rpx;
}

.avatarimage:nth-child(4){
float:right;
width:60rpx;
height:60rpx;
margin-right:20rpx;
}

.avatarimage:nth-child(5){
float:right;
width:60rpx;
height:60rpx;
vertical-align:middle;
}

.avatartext{
float:left;
font-size:30rpx;
height:100rpx;
line-height:100rpx;
padding-left:15rpx;
}

.avatartext:nth-child(3){
font-size:25rpx;
color:gainsboro;
}

.title{
width:100%;
clear:both;
}

.titletext{
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
vararticleData=require("/../../data/article-data.js");
Page({

/**
*页面的初始数据
*/
data:{

},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
//获取文章的id
varaid=options.aid;
vararticle=articleData.data[aid];
this.setData({detail:article});
},

/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){

},

/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){

},

/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){

},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

希望本文所述对大家微信小程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

微信小程序文章详情功能完整实例

热门推荐

随机推荐