前言

今天在学习列表渲染的时候，尝试实现了支持横向滑动的列表，但是遇到了很多问题，做一个小小的总结。

组件scroll-view

scroll-view是一种视图容器，指定可滚动视图区域。通过设置属性scroll-y=true并给给scroll-view一个固定高度height，可以实现竖向滚动；通过设置属性scroll-x=true可以实现横向滚动，其他的属性可以参考官方文档。

列表渲染

列表渲染是一种很基础的渲染方法，在组件上使用 wx:for 绑定一个数组，即可使用数组中各项的数据重复渲染该组件。在组件中，使用 wx:for-item 可以指定数组当前元素的变量名，默认为item；使用 wx:for-index 可以指定数组当前下标的变量名，默认为index；使用 wx:key 来指定列表中项目的唯一的标识符，可以提高渲染效率（没有特殊需求的话可以直接用index指定）。
例如，在.js中声明一个含有六个元素的数组list，可以用以下代码循环地渲染list中的所有元素

<!-- index.wxml 列表渲染 -->
<view wx:for="{{list}}" wx:key="{{index}}" class="view-parent">
    <view class="view-item">{{item.txt}}</view>
</view>

显示效果如下：

横向滑动列表

将组件scroll-view和列表渲染结合，就可以实现横向滑动列表了，样例代码如下：

<!-- index.wxml 横向滑动列表 -->
<text style="margin-left: 40%;">横向滑动列表</text>
<scroll-view scroll-x="true"  class="scroll-x-list">
  <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent">
    <view class="view-item">{{item.txt}}</view>
  </view>
</scroll-view>

/* index.wxss */
.scroll-x-list{
  height:150px;
}
.view-item{
  width:100px;
  height:100px;
  background:#1bf891;
  margin:10px;
}

显示效果如下：

可以看到结果和预期差很多，不仅没有实现横向滑动，还没有显示出所有的元素。原因是代码虽然在组件中设置了需要的属性，但是在样式上没有做对应的调整，我们必须在wxss中设置__布局__才可以达到预期效果。最容易想到的就是我们常用的flex布局，关于flex布局的内容比较多，这里就不展开了，推荐看官方文档学习。在进行下一步修改前，先声明几个必须要知道的小细节：

组件scroll-view是不支持flex布局的，要想在scroll-view中使用flex布局，必须嵌套一个其他的支持flex布局的容器，如view。

scroll-view 中的需要滑动的元素不可以用 float 浮动。

scroll-view 中在需要装载滑动元素的父容器中开启flex布局是没有作用的，应该使用dislay:inline-block来进行元素的横向编排。

第一种方法，由于要实现的是横向滑动列表，那么容器中的元素一定是不允许换行的，刚刚提到，scroll-view是不支持flex布局的，所以开启flex布局并设置flex-wrap=nowrap是无效的行为。我们选择在类scroll-x-list中设置white-space: nowrap来处理元素中的空白，让容器内的换行无效。同时，还应设置装载滑动元素的父容器——view-parent的dislay为inline-block，代码如下：

/* index.wxss */
.scroll-x-list{
  height:150px;
  white-space: nowrap;
}
.view-parent{
   display:inline-block;
}

显示效果如下，已经可以横向滚动列表了。

第二种方法，可以在scroll-view中嵌套一个view，在这个view中开启flex布局并设置flex-wrap=nowrap来阻止换行，代码如下：

<!-- index.wxml 另一种横向滑动列表 -->
<text style="margin-left: 40%;">横向滑动列表</text>
<scroll-view scroll-x="true" class="scroll-x-list">
    <view class='flex-view'>
        <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent">
            <view class="view-item">{{item.txt}}</view>
        </view>
    </view>
</scroll-view>

/* index.wxss */
.scroll-x-list{
  height:150px;
}

.flex-view{
  display:flex; 
  flex-wrap: nowrap;
}

.view-parent{
   display:inline-block;
}

显示效果与刚刚相同：

一些改进

在第一种方法中，我们没有使用到flex布局，就很容易遇到一些对齐的问题，假设我们设置数组中第三个元素为空，就会出现下面的情况：

原因很简单，inline-block的属性中在某个元素没有内容的情况下，它的基线对齐方式是基于这个元素的底边的，解决方式是设置一个垂直的对齐方式：

/* index.wxss */
.view-parent{
   display:inline-block;
   vertical-align: top; 
}

显示效果如下：

同时，你会发现第二种开启flex布局方法的横向列表不会有这种对齐的问题，我们还可以在装载滑动元素的容器中开启flex布局来让内容更加美观：

.view-item{
  width:100px;
  height:100px;
  background:#1bf891;
  margin-right: 20px;
  align-items:center;
  display:flex; 
  justify-content:center; 
}

显示效果如下：