小程序学习之列表页开发

效果图如下：

代码如下：

<!--index.wxml-->
<view style="display:flex;flex-direction:column;">//column表示垂直布局
  <view style='border:2px solid;margin-bottom:15px'>//设置边框，margin-bottom表示两框之间的距离
    <view>
      <!-- 第一层，头像 -->
      <image src="http://n.sinaimg.cn/front/95/w2048h2047/20190331/9Ih3-huxwryw4121627.jpg" style="height:40px;width:40px" />
      <text>text</text>
    </view>
    <!-- 第二层，标题 -->
    <view>
      <text>这是标题</text>
    </view>
    <view>
      <text>text</text>
      <text>text</text>
    </view>
  </view>
  
   <view style='border:2px solid;'>
    <view>
      <!-- 第一层，头像 -->
      <image src="http://n.sinaimg.cn/front/95/w2048h2047/20190331/9Ih3-huxwryw4121627.jpg" style="height:40px;width:40px" />
      <text>text</text>
    </view>
    <!-- 第二层，标题 -->
    <view>
      <text>这是标题</text>
    </view>
    <view>
      <text>text</text>
      <text>text</text>
    </view>
  </view>
</view>

 

增加了一些新的属性之类的，效果图如下：

代码如下：

<view style="display:flex;flex-direction:column;">
  <view style='border:2px solid;margin-bottom:15px;padding:5px;color:yellow;border-bottom:5px solid #EFEFF3'>//整个框的布局
    <view>
      <!-- 第一层，头像 -->
      <image src="http://n.sinaimg.cn/front/95/w2048h2047/20190331/9Ih3-huxwryw4121627.jpg" style="height:20px;width:20px" />
      <text style='font-size:18px;color:#888888'>text</text>
    </view>
    <!-- 第二层，标题 -->
    <view style='margin-top:10px;margin-bottom:10px;'>
      <text style='font-size:20px;color:#353535'>这是标题</text>
    </view>
    <view style='display:flex;justify-content:space-between'>
      <text style='font-size:18px;color:#888888'>10条回复</text>
      <text style='font-size:18px;color:#888888'>节点</text>
    </view>
  </view>
  
    <view style='border:2px solid;margin-bottom:15px;padding:5px;color:yellow'>
    <view>
      <!-- 第一层，头像 -->
      <image src="http://n.sinaimg.cn/front/95/w2048h2047/20190331/9Ih3-huxwryw4121627.jpg" style="height:20px;width:20px" />
      <text style='font-size:18px;color:#888888'>text</text>
    </view>
    <!-- 第二层，标题 -->
    <view style='margin-top:10px;margin-bottom:10px;'>
      <text style='font-size:20px;color:#353535'>这是标题</text>
    </view>
    <view style='display:flex;justify-content:space-between'>//本来“10条回复”和“节点”是挨着的，参考上图
      <text style='font-size:18px;color:#888888'>10条回复</text>
      <text style='font-size:18px;color:#888888'>节点</text>
    </view>
  </view>
</view>