【笔记】横向滑动列表的渲染
前言
今天在学习列表渲染的时候，尝试实现了支持横向滑动的列表，但是遇到了很多问题，做一个小小的总结。
组件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;
}
[代码]
显示效果如下：
[图片]
总结
scroll-view是一个十分常见实用的组件，但是使用时也有一些需要注意的问题，比如不支持直接使用flex布局。总体来看，比起设置inline-block的布局，更推荐在scroll-view中嵌套一层view再开启flex布局的方法，可以更灵活的摆放控制滑动元素。
