<view>
 <!-- swiper下只能放swiper-item组件 -->
  <swiper autoplay indicator-dots="{{1}}">
    <swiper-item>
      <image src="../../img/post/crab.png" mode="widthFix"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../img/post/cat.png" mode="widthFix"></image></swiper-item>
    <swiper-item>
      <image src="../../img/post/vr.png" mode="widthFix"></image>
    </swiper-item>
  </swiper>

 <block wx:for="{{posts}}">
  <view class="post-container">
   <view class="post-author-date">
    <image class="avatar" src="{{item.avatarImg}}"></image>
    <text class="post-date">{{item.postDate}}</text>
   </view>
   <text class="post-title">{{item.title}}</text>
 <image class="post-img" src="{{item.postImgSrc}}"></image>  
    <text>{{item.content}}</text>
    <view class="post-like">
      <l-icon size="28" name="favor" color="#666" class="post-like-icon"/>
      <text class="post-like-num">{{item.postLikeNum}}</text>
      <l-icon name="research" size="32" color="#666" class="post-like-icon"/>
      <text class="post-search-num">{{item.post}}</text>  
    </view>
  </view>
</block>
</view>

// pages/posts/posts.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  // init
      title:"2021宝可梦大赛指南",
      content:"The film is very intresting.I like it",
      postImgSrc:"../../img/post/xiaolong.jpg",
      postDate:"2022年9月",
      postLikeNum:"98",
      postSearchNum:"2833",
      avatarImg:"../../img/avatar/2.png",
      flag:"true"
    },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
      console.log('onLoad')
      var content=[{
        title:"2024宝可梦大赛指南",
        content:"The film is very intresting.I like it",
        postImgSrc:"../../img/post/xiaolong.jpg",
        postDate:"2022年9月",
        postLikeNum:98,
        postSearchNum:2833,
        avatarImg:"../../img/avatar/2.png"
      },{
        title:"2034宝可梦大赛指南",
        content:"The film is very intresting.I like it",
        postImgSrc:"../../img/post/xiaolong.jpg",
        postDate:"2022年9月",
        postLikeNum:98,
        postSearchNum:2833,
        avatarImg:"../../img/avatar/1.png"
    }],
    
    this.setData({
      posts:content
     })
  
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
      console.log('onReady')
      console.log(this.data)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onShow')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
      console.log('onHide')
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log(onUnload)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})




/* pages/posts/posts.wxss */

swiper{
  width:100%;
  height:480rpx;

}

swiper image{
  width: 100%;
}

.post-author-date{
 margin: 5rpx 0 12rpx 12rpx; 
}

.post-container{
  display:flex;
  flex-direction: column;
  margin-top:20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top:1px,solid,#ededed;
  border-bottom: 1px,solid,#ededed;
  padding-bottom: 10rpx;
}


.avatar{
  width:35rpx;
  height: 35rpx;
  vertical-align: center;

}

.post-author-date{
  display: flex;
  align-items: center;
  flex-direction: row;
}


.post-img{

  width:828rpx;
  margin-bottom: 10rpx;
}


.post-date{
  margin-left: 12rpx;
  vertical-align: center;
}

.post-title{
  margin-left:240rpx;
  margin-bottom: 10rpx;
  font-weight: 700;
}

.post-like{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.post-like-num{
  margin-left:22rpx;
}

.post-like-icon{
  margin-left:18rpx;
}