91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序文章詳情功能的代碼實例解析

發布時間:2020-07-18 16:49:14 來源:億速云 閱讀:276 作者:小豬 欄目:web開發

這篇文章主要講解了微信小程序文章詳情功能的代碼實例解析,內容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。

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 () {
 
 }
})

看完上述內容,是不是對微信小程序文章詳情功能的代碼實例解析有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

溧阳市| 濮阳县| 临漳县| 全椒县| 信宜市| 东莞市| 东山县| 宣城市| 应用必备| 黔南| 平南县| 洮南市| 嵊泗县| 阿图什市| 双牌县| 启东市| 吉隆县| 婺源县| 临汾市| 宁都县| 米脂县| 秦皇岛市| 松滋市| 阿坝县| 治多县| 朝阳县| 隆回县| 大方县| 镇远县| 丰都县| 南雄市| 北碚区| 通许县| 淮安市| 抚顺市| 哈密市| 万宁市| 多伦县| 定结县| 西乌珠穆沁旗| 噶尔县|