实现微信小程序文章正文页面简洁完整布局的功能方法

1、wxss样式页面代码如下：

swiper{
  width:100%;
  height:500rpx;
}
swiper image{
   width:100%;
  height:500rpx;
}
.content{
   /* display: flex;  */
   flex-direction: colum;
   margin-top: 30rpx;
   margin-bottom: 30rpx;
   background-color: #fff;
   /* border-bottom: 1px solid #ededed;  */
   border-top: 1px solid #ededed; 
   padding-bottom: 5px; 
}
 .author-date{ 
  /* margin-top: 10rpx;
  margin-bottom: 20rpx;
  margin-left: 10rpx; */
  margin: 10rpx 0 20rpx 10rpx;
}
.author{
  width: 60rpx;
  height: 60rpx;
   vertical-align: middle; 
}
.date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
   font-size: 26rpx; 
}
.title{
  font-size: 34rpx;
  font-weight: 600;
  color:#333;
  margin-bottom: 20px;
}
.image{
  margin-left: 16px;
  width: 100%;
  height: 200px;
  margin: auto 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.article-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 30rpx;
  line-height: 40rpx;
  letter-spacing: 2rpx;
}
.article-images{
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.article-text{
  vertical-align: middle;
}

2、wxml页面代码如下：

    <view class="content">
        <!-- 头像 -->
        <view class="author-date"> 
            <image src="/images/4.png" class="author"></image>
            <text class="date">logo 2017年七月</text>
        </view>
        <!-- 标题内容 -->
         <text class="title">那年夏天你在哪里</text>
         <image class="image" src="/images/6.jpg"></image>
         <text class="article-content">天不言自高，地不言自厚，奇迹，是不会在容易的道路上绽放的。人生没有如果，只有后果和结果，过去的不再回来，回来的不再完美。</text>
        <view >

          <image class="article-images" src="../../images/icon/chat.png"></image>
          <text  class="article-text">66</text>

          <image class="article-images" src="../../images/icon/view.png"></image>
          <text class="article-text">88</text>

        </view>


    </view>

通过以上两步就可以如下文章页完整布局效果：

模板简介：该模板名称为【实现微信小程序文章正文页面简洁完整布局的功能方法】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。