微信小程序 新闻列表及详情页

微信小程序 新闻列表及详情页

1. 页面效果
   
   
   

2. 新闻列表

<view class="conatiner">
  <view class="news-item" wx:for="{
    {newsList}}" wx:for-index="index">
    <view class="title" bindtap="todetail" data-options="{
    {item.id}}" >{
  {item.title}}</view>
    <view class="author-info">
      <text class="author-name">作者：{
  {item.author}} </text>
      <text class="author-date">发表于 {
  {item.publishDate}}</text>
    </view>
    <view style="border-bottom:1rpx solid #707070;width:100%"></view>
  </view>
</view>

/* pages/news/news_list/news_list.wxss */
.news-item {
   
  margin: 30rpx;
}
.title {
   
  font-size: 40rpx;
  font-weight: bold;
  letter-spacing: 2px;
  color: #313131;
}

.author-info {
   
  margin:20rpx 0;
  text-align: right;
  color: #707070;
  font-size: small;
}

// pages/news/news_list/news_list.js
Page({
   
  data: {
   
    newsList: [{
   
        id: 0,
        tit