微信小程序小实例一：文章详情

本是古典何须时尚 2023-08-17 16:51 113阅读 0赞

接着上一篇

[https://blog.csdn.net/huangyuxin\_/article/details/101690256][https_blog.csdn.net_huangyuxin_article_details_101690256]

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

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

[https_blog.csdn.net_huangyuxin_article_details_101690256]: https://blog.csdn.net/huangyuxin_/article/details/101690256