本文将带你了解微信小程序开发之开发-新闻列表之新闻列表绑定，希望本文对大家学微信有所帮助。

1、效果图预览2、准备工作在拿到效果图后不要先急着去写代码，而是要去分析一下页面的整体结构，用什么方式定位和布局。小程序里建议使用flex布局，因为小程序对flex的支持是很好的。接下来继续完成下面的新闻列表部分3、wxml部分新闻列表部分整体使用flex纵向布局比较合适， 先把页面内的元素标签和类名写好。    <view class="post-container">
      <view>
        <image src="{{item.avatar}}"></image>
        <text>{{item.date}}</text>
      </view>
      <text>{{item.title}}</text>
      <image   src="{{item.imgSrc}}"></image>
      <text>{{item.content}}</text>
      <view>
        <image   src="{{item.view_img}}"></image>
        <text>{{item.reading}}</text>
        <image   src="{{item.collect_img}}"></image>
        <text>{{item.collection}}</text>
      </view>
      </view>、wxss部分.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！