强力推荐！微信小程序学习第四天：scroll-view 组件的纵向滑动技巧

2024-01-20 20:52:52

纵向滑动

微信小程序中的 scroll-view 组件支持纵向滑动。要实现纵向滑动，您需要将 scroll-y 属性设置为 true。

<scroll-view scroll-y="true">
  <!-- 可滑动内容 -->
</scroll-view>

scroll-x 和 scroll-y 属性

scroll-view 组件的 scroll-x 和 scroll-y 属性分别控制组件的水平和垂直滚动。如果要实现纵向滑动，您需要将 scroll-y 属性设置为 true，而 scroll-x 属性设置为 false。

<scroll-view scroll-x="false" scroll-y="true">
  <!-- 可滑动内容 -->
</scroll-view>

scroll-top 属性

scroll-view 组件的 scroll-top 属性可以设置组件的初始滚动位置。如果要让组件一开始就滚动到顶部，您可以将 scroll-top 属性设置为 0。

<scroll-view scroll-top="0">
  <!-- 可滑动内容 -->
</scroll-view>

scroll-into-view 属性

scroll-view 组件的 scroll-into-view 属性可以将指定的元素滚动到视图中。如果要将某个元素滚动到视图中，您可以使用 scroll-into-view 属性来指定该元素的 ID。

<scroll-view>
  <view id="element">
    <!-- 元素内容 -->
  </view>
</scroll-view>

<button bindtap="scrollToView">
  滚动到元素
</button>

实战案例

现在，我们来举一个实战案例，演示如何使用 scroll-view 组件实现纵向滑动。

我们想要创建一个简单的微信小程序，其中包含一个可滑动的列表。列表中包含 100 个项目，每个项目都包含一个标题和一个。

<scroll-view scroll-y="true">
  <view class="list">
    <view class="item" wx:for="{{list}}" wx:key="*this">
      <view class="title">{{item.title}}</view>
      <view class="description">{{item.description}}</view>
    </view>
  </view>
</scroll-view>