（六）微信小程序：制作新聞詳情頁

制作新聞詳情頁

　　　1.實現：點擊新聞實現跳轉至詳情頁面

　　　　　　（1）news.wxml中利用bindtag實現跳轉至執行函數

<block wx:for="{{ news }}" wx:for-index="idx" wx:for-item="item" wx:key="{{ idx }}">
  <view bindtap="detailsHandler" data-newsid="{{ item.id }}">
    <template is="newsTemplate" data="{{ ...item }}"></template>
  </view>
</block>

　　　　　　　　代碼解析：1、因為template標簽上不能添加跳轉，所以采取view標簽方式

　　　　　　　　　　　　　2、傳遞的newsid  為自定義屬性（利用data-聲明），用來傳遞點擊的新聞id

　　　　　　（2）news.js中利用函數detailsHandler實現跳轉至詳情頁面

detailsHandler(event){
    var currentId = event.currentTarget.dataset.newsid;
    wx.navigateTo({
      url: './news-details/news-details?id='+currentId,
    })
  }

　　　　　　　　 代碼解析：1、利用event.currentTarget.dataset.newsid  獲取傳入的id值

　　　　　　　　　　　　　 2、將id值作為url的一部分，搜尋具體的頁面信息

　　　2.實現：制作詳情頁面(wxml+css)

　　　　　　　　（1）news-details.wxml

<!--pages/news/news-details/news-details.wxml-->
<view class="news-detail-container">
  <image class="head-img" src="../{{ currentNews.image }}"></image>
  <view class="author-time">
    <image class="author-avatar" src="../{{currentNews.icon}}"></image>
    <text class="author-name">{{ currentNews.author }}</text>
    <text class="const-text">發表於</text>
    <text class="time">{{ currentNews.time }}</text>
  </view>
  <text class="title">{{ currentNews.title }}</text>
  <view class="tool">
    <view class="circle-img">
      <image src="../../../image/sch.png" ></image> 
      <image src="../../../image/sc.png" ></image> 
      <image class="share-img" src="../../../image/fx.png"></image>
    </view>
    <view class="horizon"></view>
    <text class="detail">{{ currentNews.desc }}</text>
  </view>
</view>

　　　　　　　　（2）news-details.wxss

/* pages/news/news-details/news-details.wxss */
.news-detail-container{
  display: flex;
  flex-direction: column;
}

.head-img{
  width: 100%;
}

.author-time{
  flex-direction: row;
  margin-left: 30rpx;
  margin-top: 20rpx;
}

.author-avatar{
  height: 64rpx;
  width: 64rpx;
  border-radius: 50%;
  vertical-align: middle;
}

.author-name{
  font-size: 30rpx;
  font-weight: 700;
  margin-left: 20rpx;
  vertical-align: middle;
  color:#666;
}

.const-text{
  font-size: 24rpx;
  color:#999;
  margin-left: 20rpx;
}

.time{
  font-size: 24rpx;
  margin-left: 30rpx;
  vertical-align: middle;
  color: #999;
}

.title{
  margin-left: 40rpx;
  font-size: 36rpx;
  font-weight: 700;
  margin-top: 30rpx;
  letter-spacing: 2px;
  color: #4b556c;
}

.tool{
  margin-top: 20rpx;
}

.circle-img{
  float: right;
  margin-right: 40rpx;
  vertical-align: middle;
}

.circle-img image{
  width: 50rpx;
  height: 50rpx;
}

.share-img{
  margin-left: 30rpx;
}

.horizon{
  width: 660rpx;
  height: 1px;
  background-color: #e5e5e5;
  vertical-align: middle;
  position: relative;
  top: 46rpx;
  margin: 0 auto;
  z-index: -99;
}

.detail{
  color:#666;
  margin-top: 20rpx;
  margin-right: 30rpx;
  margin-left: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
  font-size: 24rpx;
}

.playermusic{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
  margin-left: 40rpx;
}

　　　3.實現：js文件中數據接收，達到動態頁面效果

　　　　　　　　news-details.js

// pages/news/news-details/news-details.js
var data = require("../../../data/data.js");
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      currentNews:{}
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
      this.setData({
        currentNews:data[options.id]
      });
  },

})

　　　　　　　　　　代碼解析：1、首先導入數據至data變量(  require)

　　　　　　　　　　　　　　　2、其次聲明currentNews對象

　　　　　　　　　　　　　　　3、最后在onLoad中實現對象賦值

　　　4.呈現出來的效果圖：

　　　　　　　　

 

 本節實現了頁面動態跳轉至新聞詳情頁面，下一節實現收藏功能~