<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>

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

<!--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>

/* 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;
}

// 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]
      });
  },

})