首字母直达定位，让选择更快！微信小程序的scroll-into-view用法详解

前端

2024-01-07 21:05:58

微信小程序scroll-into-view属性介绍

scroll-into-view属性是微信小程序scroll-view组件的属性之一，它允许开发者指定需要滚动到的元素id，从而实现快速定位。

scroll-into-view属性使用场景

scroll-into-view属性可以应用于各种需要快速定位的场景，例如：

根据首字母选择城市：在城市选择器中，用户可以通过点击首字母快速定位到对应的城市。
根据首字母选择通讯录姓名：在通讯录中，用户可以通过点击首字母快速定位到对应的联系人。
根据首字母选择商品分类：在电商平台中，用户可以通过点击首字母快速定位到对应的商品分类。

scroll-into-view属性使用步骤

在需要使用scroll-into-view属性的scroll-view组件中，添加scroll-y属性，使其支持垂直滚动。
在需要定位的元素中，添加id属性。
在需要触发快速定位的元素上，绑定事件监听函数，并在函数中使用scrollIntoView方法，并传入需要定位的元素id。

scroll-into-view属性使用示例

<!-- scroll-view组件 -->
<scroll-view scroll-y>
  <view id="city-A">北京</view>
  <view id="city-B">上海</view>
  <view id="city-C">广州</view>
  <view id="city-D">深圳</view>
</scroll-view>

<!-- 首字母选择器 -->
<view bindtap="scrollToCityA">A</view>
<view bindtap="scrollToCityB">B</view>
<view bindtap="scrollToCityC">C</view>
<view bindtap="scrollToCityD">D</view>

<!-- 事件监听函数 -->
<script>
  Page({
    scrollToCityA() {
      this.setData({
        scrollIntoView: 'city-A'
      })
    },
    scrollToCityB() {
      this.setData({
        scrollIntoView: 'city-B'
      })
    },
    scrollToCityC() {
      this.setData({
        scrollIntoView: 'city-C'
      })
    },
    scrollToCityD() {
      this.setData({
        scrollIntoView: 'city-D'
      })
    }
  })
</script>

注意事项

scroll-into-view属性仅支持在scroll-view组件中使用。
scroll-into-view属性只能滚动到当前可视区域内的元素。如果需要滚动到可视区域外的元素，需要先将其滚动到可视区域内，然后再使用scroll-into-view属性进行定位。
scroll-into-view属性只能滚动到具有id属性的元素。如果需要滚动到没有id属性的元素，需要先为其添加id属性，然后再使用scroll-into-view属性进行定位。