<view>
  <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000" easing-function="linear">
   <swiper-item><image src='/images/banner/2.jpg'></image></swiper-item>
   <swiper-item><image src='/images/banner/1.jpg'></image></swiper-item>  
  </swiper>
</view>
 
<block wx:for="{{articles}}" wx:for-item="item" wx:key="name" wx:for-index="idx">
<view class="list-article" catchtap="onPostTap" data-aid="{{idx}}">
 <view class="avatar">
  <image src="{{item.avatar_img}}"></image>
  <text>{{item.date}}</text>
 </view>
 <view class="description">
  <image src="{{item.des_img}}"></image>
  <text>{{item.description}}</text>
  <view class="article-post">
   <image src="/images/icon/none-star.png"></image>
   <text>{{item.posts}}</text>
   <image src="/images/icon/view.png"></image>
   <text>{{item.view}}</text>
  </view>
 </view>
</view>
</block>

/* pages/index/index.wxss */
.swiper{
 width: 100%;
 height: 500rpx;
}
body{
 background: black;
}
.swiper image{
 width: 100%;
 height: 500rpx;
}
.list-article{
 margin-top:20rpx;
}
.avatar{
 margin-bottom: 20rpx;
 overflow: hidden;
}
.avatar image{
  padding-left:20rpx;
  width:100rpx;
  height: 100rpx;
  float: left;
}
.avatar text{
 float: left;
 height: 100rpx;
 line-height: 100rpx;
 padding-left:20rpx;
 font-size:0.5rem;
}
 
.description image{
 width:100%;
 height: 300rpx;
}
list-article{
 flex-direction: column;
}
.description text{
 font-size:25rpx;
 letter-spacing: 2rpx;
 padding-top:20rpx;
 padding-left: 20rpx;
 line-height: 40rpx;
}
.article-post image{
 width: 30rpx;
 height: 30rpx;
 vertical-align: middle;
}
.article-post{
 flex-direction: row;
 margin-top:10rpx;
}
.article-post text{
 font-size: 20rpx;
 vertical-align: middle;
 margin-right: 10rpx;
}

{
 "navigationBarBackgroundColor": "#405f80",
 "navigationBarTitleText": "一點新聞"
}

// pages/index/index.js
var articleData = require("/../../data/article-data.js");
Page({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  this.setData({ articles: articleData.data});
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {
 
 },
 
 /**
  * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function () {
 
 }
})

var data = [{
 aid:1,
 title: "希望",
 avatar:"魯迅",
 avatar_img:"/images/avatar/1.png",
 date:"2019-09-29 星期日",
 des_img:"/images/post/sls.jpg",
 view:"100",
 posts:"112",
 description:"我大概老了。我的頭發(fā)已經(jīng)蒼白，不是很明白的事么？我的手顫抖著，不是很明白的事么？那么我的靈魂的手一定也顫抖著，頭發(fā)也一定蒼白了。",
 content:"我的心分外地寂寞。 然而我的心很平安；沒有愛憎，沒有哀樂，也沒有顏色和聲音。 我大概老了。我的頭發(fā)已經(jīng)蒼白，不是很明白的事么？我的手顫抖著，不是很明白的事么？那么我的靈魂的手一定也顫抖著，頭發(fā)也一定蒼白了。 然而這是許多年前的事了。 這以前，我的心也曾充滿過血腥的歌聲：血和鐵，火焰和毒，恢復(fù)和報仇。而忽然這些都空虛了，但有時故意地填以沒奈何的自欺的希望。希望，希望，用這希望的盾，抗拒那空虛中的暗夜的襲來，雖然盾后面也依然是空虛中的暗夜。然而就是如此，陸續(xù)地耗盡了我的青春。 我早先豈不知我的青春已經(jīng)逝去？但以為身外的青春固在：星，月光，僵墜的蝴蝶，暗中的花，貓頭鷹的不祥之言，杜鵑的啼血，笑的渺茫，愛的翔舞?！m然是悲涼漂渺的青春罷，然而究竟是青春。 然而現(xiàn)在何以如此寂寞？難道連身外的青春也都逝去，世上的青年也多衰老了么？ 我只得由我來肉薄這空虛中的暗夜了。我放下了希望之盾，我聽到Petofi Sandor (1823-49)的“希望”之歌： 希望是什么？是娼妓： 她對誰都蠱惑，將一切都獻給； 待你犧牲了極多的寶貝—— 你的青春——她就拋棄你。 這偉大的抒情詩人，匈牙利的愛國者，為了祖國而死在可薩克兵的矛尖上，已經(jīng)七十五年了。悲哉死也，然而更可悲的是他的詩至今沒有死。 但是，可慘的人生！桀驁英勇如Petofi，也終于對了暗夜止步，回顧茫茫的東方了。他說： 絕望之為虛妄，正與希望相同。 倘使我還得偷生在不明不暗的這“虛妄”中，我就還要尋求那逝去的悲涼漂渺的青春，但不妨在我的身外。因為身外的青春倘一消滅，我身中的遲暮也即凋零了。 然而現(xiàn)在沒有星和月光，沒有僵墜的蝴蝶以至笑的渺茫，愛的翔舞。然而青年們很平安。 我只得由我來肉薄這空虛中的暗夜了，縱使尋不到身外的青春，也總得自己來一擲我身中的遲暮。但暗夜又在那里呢？現(xiàn)在沒有星，沒有月光以至沒有笑的渺茫和愛的翔舞；青年們很平安，而我的面前又竟至于并且沒有真的暗夜。 絕望之為虛妄，正與希望相同！"
}];
 
module.exports = {
 data: data
}