微信小程序——scroll-view组件（可滚动视图）（四）

心已赠人 2022-10-24 01:35 213阅读 0赞

**scroll-view可滚动视图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU1MDE0NA_size_16_color_FFFFFF_t_70]

垂直滚动：

wxml代码：

<scroll-view scroll-y scroll-top="{
       {scrollTop}}">
          <view id="green" class="scroll-view-item bc_green"></view>
          <view id="red" class="scroll-view-item bc_red"></view>
          <view id="yellow" class="scroll-view-item bc_yellow"></view>
          <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>

使用竖向滚动时，需要给`<scroll-view/>`一个固定高度，通过 WXSS 设置 height。

wxss代码：

scroll-view{
      height: 200px;
    }
    .scroll-view-item{
      height: 80px;
      width: 400px;
    }
    .bc_green{
      background: green;
    }
    .bc_red{
      background: red;
    }
    .bc_yellow{
      background: yellow;
    }
    .bc_blue{
      background: blue;
    }

js代码：

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
          scrollTop:100
      }
    })

水平滚动：

wxml代码：

<scroll-view scroll-x>
          <view class="scroll-view_x">
            <view class="scroll-view-item_x bc_green"></view>
            <view class="scroll-view-item_x bc_red"></view>
            <view class="scroll-view-item_x bc_yellow"></view>
            <view class="scroll-view-item_x bc_blue"></view>
          </view>
     </scroll-view>

wxss代码：

scroll-view{
      width: 100%;
    }
    .scroll-view_x{
      display: flex;
      height: 80px;
      width: 500px;
      flex-direction: row; 
    }
    .scroll-view-item_x{
      width: 200px;
      height: 100px;
    }
    .bc_green{
      background: green;
    }
    .bc_red{
      background: red;
    }
    .bc_yellow{
      background: yellow;
    }
    .bc_blue{
      background: blue;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU1MDE0NA_size_16_color_FFFFFF_t_70]: /images/20221024/8cc954aedb83444eb864e1fe557de97b.png