2.4 实现横向滑动列表

本节将实现可以左右滑动的列表，如图2-14所示。

2.4.1 列表渲染

在文档树中打开pages/douban/index.wxml文件，添加如下代码：

    <view  wx:for="{{  boards  }}"  wx:key="{{
        item.key }}" class="weui-panel weui-
        panel_access">
        <view class="weui-panel__hd">
        {{ item.title }}
        </view>
        <view class="weui-panel__bd">
            <view  style="padding:10px"  class="weui-media-box  weui-media-box_appmsg"
                hover-class="weui-cell_active">
                <scroll-view scroll-x>
                    <view style="display:flex; ">
                        <navigator wx:for="{{ item.movies }}" wx:key="{{ item.id }}">
                              <view  style="display:flex; flex-direction:column; width:180r
                                  px; margin:10rpx; ">
                                  <image  style="width:180rpx; height:250rpx; "  src="{{
                                      item.images.large }}" mode="aspectFill" />
                                  <text style="text-align:center; overflow:hidden; white-
                                      space:nowrap; text-overflow:ellipsis; font-size:13px;
                                      padding-top:5rpx; ">{{ item.title }}</text>
                              </view>
                        </navigator>
                    </view>
                </scroll-view>
            </view>
        </view>
        <view class="weui-panel__ft">
            <navigator class="weui-cell weui-cell_access weui-cell_link">
                <view class="weui-cell__bd">更多</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
            </navigator>
        </view>
    </view>

其中，scroll-view组件用于展示一个可滚动区域，scroll-x属性代表横向滚动。

若要实现横向滚动，则容器内容必须超过屏幕宽度。在子视图view中，设置display样式为flex, flex是Flexible Box的缩写，意为“弹性布局”，设置为此属性，即view内容可以向右无限伸展。

wx:for用于将数组渲染在视图上，数组有几项便渲染几行。从2.3.2节的代码可以得知，boards数组有三个元素，所以这里会渲染三个附有“weui-panel”样式的view。

wx:for可以嵌套使用，在上面的wxml代码中，横向列表的渲染是通过嵌套渲染来实现的。被循环数组的当前项的默认变量名称是item，在被嵌套的wx:for里，子item会将父item覆盖。

在图2-15中，第一个item指的是数组boards的子项，第二个及其后面的item指的是boards.movies的子项。

2.4.2 引用样式

在文档树中打开app.wxss文件，在顶端添加如下代码：

    @import 'sim.js/weui/weui.wxss';

这里的@import是CSS引用另一个样式文件的语法，它与wxml中使用的import并不相同。

weui是一个样式库，非常符合微信小程序设计指南的要求，应用在项目中可以显著提高初学者的开发速度。

2.4.3 下载源码

在本节的学习过程中，如果遇到问题，可以通过如下方式来解决。

❑ 加入小程序微信群与作者及其他读者一同探讨。微信扫描前言中的二维码，关注“艺述思维”，发送“小程序”进群。

❑ 下载作者的源码，对照查找问题。在公众号中发送“豆豆电影2.4”获取下载地址。