微信小程序（4）：可滚动视图区域组件

约定不等于承诺〃 2022-12-30 13:59 466阅读 0赞

### 文章目录 ###

*   *   *  scroll-view 可滚动视图区域
         *   *  1、scroll-y：允许纵向滚动
             *  2、scroll-x：允许横向滚动
             *  3、scroll-top：设置竖向滚动条位置
             *  4、scroll-left：设置横向滚动条位置
             *  5、scroll-with-animation：在设置滚动条位置时使用动画过渡（配合上面两个使用）

### scroll-view 可滚动视图区域 ###

**使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。**

属性有很多，现列举以下，其余的学到后补充。

#### 1、scroll-y：允许纵向滚动 ####

相当于加了一个竖向的滑轮。各部分代码如下：  
index.wxmi文件代码：

<scroll-view class="out" scroll-y>
      <view class="box">111</view>
      <view class="box">222</view>
      <view class="box">333</view>
      <view class="box">444</view>
      <view class="box">555</view>
      <view class="box">666</view>
      <view class="box">777</view>
    </scroll-view>

index.wxss文件代码：

.out{ 
      width: 100%;
      background-color: gray;
      height: 400px;
    }
     .out .box{ 
       width: 100px;
       height: 100px;
       background-color: pink;
     }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

#### 2、scroll-x：允许横向滚动 ####

index.wxmi文件代码：

<scroll-view class="out" scroll-x>
      <view class="box">111</view>
      <view class="box">222</view>
      <view class="box">333</view>
      <view class="box">444</view>
      <view class="box">555</view>
      <view class="box">666</view>
      <view class="box">777</view>
    </scroll-view>

index.wxss文件代码：

.out{ 
      width: 100%;
      background-color: gray;
      white-space: nowrap;/*设置不换行*/
    }
     .out .box{ 
       width: 100px;
       height: 100px;
       background-color: pink;
       display: inline-block;/*显示成一行*/
       margin-right: 3px;
     }

效果：  
水平方向可滑动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

#### 3、scroll-top：设置竖向滚动条位置 ####

#### 4、scroll-left：设置横向滚动条位置 ####

例如我将 index.wxmi文件代码改成下面所示代码：

<scroll-view class="out" scroll-x scroll-left="300px">
      <view class="box">111</view>
      <view class="box">222</view>
      <view class="box">333</view>
      <view class="box">444</view>
      <view class="box">555</view>
      <view class="box">666</view>
      <view class="box">777</view>
    </scroll-view>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

#### 5、scroll-with-animation：在设置滚动条位置时使用动画过渡（配合上面两个使用） ####

例如我将 index.wxmi文件代码改成下面所示代码：

<scroll-view class="out" scroll-x scroll-left="300px" scroll-with-animation>
      <view class="box">111</view>
      <view class="box">222</view>
      <view class="box">333</view>
      <view class="box">444</view>
      <view class="box">555</view>
      <view class="box">666</view>
      <view class="box">777</view>
    </scroll-view>

效果图：  
最终效果和上一节所示一样，但是刷新后多了个动画效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221120/0e6dfc3aa5b243c1aebc0689fd576e8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221120/1b420e7b3be3439998f3bc438b2ac510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20221120/64d284c29dc94011a074692fdca3f847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: /images/20221120/a7bd01f174f64e2495a7aecaff374f33.png