微信小程序文章详情功能完整实例
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了微信小程序文章详情功能,结合完整实例形式详细分析了微信小程序文章详情功能具体步骤、原理及功能实现技巧,需要的朋友可以参考下
本文实例讲述了微信小程序文章详情功能。分享给大家供大家参考，具体如下：
接着上一篇
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
<!--pages/article-detail/detail.wxml-->
<view>
<image src="/images/post/sls.jpg" class="detail-img"></image>
</view>
<view class="avatar">
<image src="/images/avatar/2.png"></image>
<text>{{detail.avatar}}</text>
<text>发表于 {{detail.date}}</text>
<image src="/images/icon/collection-anti.png"></image>
<image src="/images/icon/share.png"></image>
</view>
<view class="title">
<text>{{detail.title}}</text>
</view>
<view class="content">
{{detail.content}}
</view>
<view class="pre-next">
<text class="pre">上一篇：啊啊啊啊啊啊啊</text><text class="next">下一篇：哈哈哈哈哈</text>
</view>
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 () {
}
})
希望本文所述对大家微信小程序设计有所帮助。