先自定义填写数据,完成css样式的编写。
posts.wxml
<!--pages/posts/posts.wxml-->
<swiper indicator-dots="{{true}}" vertical="{{false}}" autoplay="{{true}}" intervsl="3000">
<swiper-item>
<image src="/img/wx.png" />
</swiper-item>
<swiper-item>
<image src="/img/vr.png" />
</swiper-item>
<swiper-item>
<image src="/img/iqiyi.png" />
</swiper-item>
</swiper>
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="/img/avatar/1.png"></image>
<text class="post-date">Oct 20,2020</text>
</view>
<text class="post-title">正是虾肥蟹壮时</text>
<image class="post-image" src="/img/post/crab.png"></image>
<text class="post-content">"菊黄蟹正肥,品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,"</text>
<view class="post-like">
<image class="post-like-image" src="../../img/icon/chat.png"></image>
<text class="post-like-font">112</text>
<image class="post-like-image" src="../../img/icon/view.png"></image>
<text class="post-like-font">996</text>
</view>
</view>
posts.wxss
/* pages/posts/posts.wxss */
swiper{
width:100%;
height:600rpx;
}
swiper image{
width: 100%;
height:600rpx;
}
.post-container{
display: flex;
flex-direction: column;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
margin-top: 20rpx;
background-color: #fff;
}
.post-author-date{
display: flex;
flex-direction: row;
margin: 10rpx 0 20rpx 10rpx;
align-items: center;
}
.post-author{
height: 60rpx ;
width: 60rpx;
}
.post-date{
margin-left: 20rpx;
font-size: 26rpx;
}
.post-title{
font-size: 34rpx;
font-weight: 600;
margin-left: 10rpx;
margin-bottom: 10rpx;
color:#333;
}
.post-image{
width: 100%;
height: 340rpx;
margin-bottom: 15rpx;
}
.post-content{
font-size: 28rpx;
color:#666;
letter-spacing: 2rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
}
.post-like{
display: flex;
flex-direction: row;
font-size: 26rpx;
margin-left: 20rpx;
align-items: center;
}
.post-like-image{
height: 32rpx;
width: 32rpx;
margin-right: 16rpx;
}
.post-like-font{
margin-right: 40rpx;
}