【笔记】横向滑动列表的渲染
发布于 3 年前 作者 zhangmin 3603 次浏览 来自 分享

前言

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

组件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布局的内容比较多,这里就不展开了,推荐看官方文档学习。在进行下一步修改前,先声明几个必须要知道的小细节:

  1. 组件scroll-view是不支持flex布局的,要想在scroll-view中使用flex布局,必须嵌套一个其他的支持flex布局的容器,如view。
  2. scroll-view 中的需要滑动的元素不可以用 float 浮动。
  3. 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布局的方法,可以更灵活的摆放控制滑动元素。

6 回复

以前没注意过,看了你的文章之后学习了渲染的知识,赞!

很有帮助

很好的文章

先收藏一波,感觉以后会用到

很清晰的文章,支持下😀

学到了!scroll-view居然还有这么多讲究,以前自己用只是简单地把他当作一个overflow:scroll的view组件

回到顶部