滚动穿透？Picker组件的烦恼？用Vant试试！

前言

在移动端开发中，我们经常需要使用Picker组件来选择日期、时间等信息。然而，在某些情况下，当我们在Picker组件中选择时间时，会发现它后面的页面也会跟着滚动。这就被称为滚动穿透问题。

滚动穿透问题不仅影响了用户体验，也可能导致一些意想不到的问题。例如，如果用户在Picker组件中选择时间时，后面的页面发生了滚动，那么用户可能会误以为自己选择了错误的时间。

解决滚动穿透问题

为了解决滚动穿透问题，我们可以使用Vant组件库。Vant是一个轻量级、模块化的移动端组件库，提供了丰富的UI组件，包括Picker组件。

Vant的Picker组件有一个名为catchScroll的属性，它可以用来阻止滚动穿透。当我们把catchScroll属性设置为true时，Picker组件就会阻止其后面的页面滚动。

<van-picker :catch-scroll="true">
  <!-- Picker选项 -->
</van-picker>

总结

通过使用Vant组件库，我们可以轻松解决滚动穿透问题。Vant的Picker组件具有catchScroll属性，可以用来阻止滚动穿透。这使得我们在移动端开发中使用Picker组件时更加方便。

示例代码

import { Picker } from 'vant';

const app = new Vue({
  el: '#app',
  components: {
    [Picker.name]: Picker
  },
  data() {
    return {
      value: '2019-01-01'
    };
  }
});

<template>
  <div id="app">
    <van-picker v-model="value" :catch-scroll="true">
      <van-picker-column values="2018, 2019, 2020, 2021" />
      <van-picker-column values="01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12" />
      <van-picker-column values="01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31" />
    </van-picker>
  </div>
</template>