小程序学习（九）

一行多列图文列表的实现

关于小程序图文列表的展示，我们可以看到官方给出的学习文档仅仅只是给出多行单列的展示，
但这有时候不能达到我们的开发需求，在开发小程序时，我们希望实现的是一行多列的效果。因此，今天来学习一下怎么实现一行多列的图文混合列表。
在搜索了一些资料后，发现要实现一行多列的图文列表其实也并不难，来看一下实现代码：
.wxml

<view class="appointment">
  <view class="moduler">
     <navigator  class="s-item">
      <view >
        <image src='/image/icons/s1.jpg' class="s-image"></image>
      </view>
      <view class="s-title">
         <text>白夜行</text>  
      </view>
    </navigator>
    
    <navigator  class="s-item">
      <view >
        <image src='/image/icons/s2.jpg' class="s-image"></image>
      </view>
      <view class="s-title">
         <text>人类简史</text>  
      </view>
    </navigator>

     <navigator  class="s-item">
      <view >
        <image src='/image/icons/s3.jpg' class="s-image"></image>
      </view>
      <view class="s-title">
         <text>浮生六记</text>  
      </view>
    </navigator>

     <navigator  class="s-item">
      <view >
        <image src='/image/icons/s4.jpg' class="s-image"></image>
      </view>
      <view class="s-title">
         <text>北野武的小酒馆</text>  
      </view>
    </navigator>

    <navigator  class="s-item">
      <view >
        <image src='/image/icons/s5.jpg' class="s-image"></image>
      </view>
      <view class="s-title">
         <text>CCNA学习指南</text>  
      </view>
    </navigator>

    <navigator  class="s-item">
      <view >
        <image src='/image/icons/s6.jpg' class="s-image"></image>
      </view>
      <view class="s-title">
         <text>皮囊</text>  
      </view>
    </navigator>
   </view>
</view>

这里我们会用到navigator组件，该组件在前面的学习中我们也用到过，但是没有详细的学习过，在后面的学习中，会仔细学习一下该组件。
.wxss

.s-item{
width:25%;
height:300rpx;
float: left; 
margin-left:50rpx;
margin-top:20rpx;
position: relative;
}
.s-image{
width: 100%;
height:180rpx;
}
.s-title{
font-size:25rpx;
font-family: '宋体';
display:flex;
height:55rpx;
margin-top:15rpx;
flex-direction:column;
justify-content: center;
}

实现效果：

但在实现过程中发现一个问题，就是.wxml的代码太繁琐，当想实现很多行这样的列表时，我们就一直需要重复一段代码，这显然是不可取的，因此需要用到前面学到的数据绑定的方法去简化代码。这里就不附上简化后的代码了。