溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了微信小程序文章詳情功能的代碼實例解析，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
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 () {
}
})看完上述內容，是不是對微信小程序文章詳情功能的代碼實例解析有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
