Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

小程序 PickerView 会自动回弹至初始值 [Vue >= 3.4.28] #15950

Closed
eiinu opened this issue Jun 20, 2024 · 1 comment
Closed

小程序 PickerView 会自动回弹至初始值 [Vue >= 3.4.28] #15950

eiinu opened this issue Jun 20, 2024 · 1 comment
Labels
F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x

Comments

@eiinu
Copy link
Contributor

eiinu commented Jun 20, 2024

相关平台

微信小程序

复现仓库

https://github.com/eiinu/taro-input-boolean.git
小程序基础库: 3.4.7
使用框架: Vue 3

复现步骤

picker-view 文档中的默认示例

<template>
  <view class="index">
    <view>{{year}}年{{month}}月{{day}}日</view>
    <picker-view indicator-style="height: 30px;" style="width: 100%; height: 300px;" :value="value" @change="onChange">
      <picker-view-column>
        <view v-for="(item, index) in years" :key="index">{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view v-for="(item, index) in months" :key="index">{{item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view v-for="(item, index) in days" :key="index">{{item}}日</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
  export default {
    name: "Index",
    data() {
      const date = new Date()
      const years = []
      const months = []
      const days = []
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      for (let i = 1; i <= 31; i++) {
        days.push(i)
      }
      return {
        years: years,
        year: date.getFullYear(),
        months: months,
        month: 2,
        days: days,
        day: 2,
        value: [3, 1, 1]
      }
    },

    methods: {
      onChange: function(e) {
        const val = e.detail.value
        console.log(val)
        this.year = this.years[val[0]]
        this.month = this.months[val[1]]
        this.day = this.days[val[2]]
      }
    }
  }
</script>

pnpm i
pnpm dev:weapp

期望结果

picker-view 可以正常滑动选择

实际结果

picker-view 滑动后会自动回弹至初始值

环境信息

👽 Taro v3.6.32


  Taro CLI 3.6.32 environment info:
    System:
      OS: macOS 12.4
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
      npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.32 => 3.6.32 
      @tarojs/components: 3.6.32 => 3.6.32 
      @tarojs/helper: 3.6.32 => 3.6.32 
      @tarojs/plugin-framework-vue3: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-alipay: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-h5: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-jd: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-qq: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-swan: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-tt: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-weapp: 3.6.32 => 3.6.32 
      @tarojs/runtime: 3.6.32 => 3.6.32 
      @tarojs/shared: 3.6.32 => 3.6.32 
      @tarojs/taro: 3.6.32 => 3.6.32 
      @tarojs/taro-loader: 3.6.32 => 3.6.32 
      @tarojs/webpack5-runner: 3.6.32 => 3.6.32 
      babel-preset-taro: 3.6.32 => 3.6.32 
      eslint-config-taro: 3.6.32 => 3.6.32 

补充信息

1、Vue 版本

在 Vue 版本 >= 3.4.28 时会出现此 issue 反馈的问题,< 3.4.28 时是正常的。

2、平台

小程序下存在问题,H5 环境正常。

@eiinu
Copy link
Contributor Author

eiinu commented Jun 22, 2024

Vue 3.4.30 已修复该问题 https://github.com/vuejs/core/releases/tag/v3.4.30

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-vue3 Framework - Vue 3 T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Projects
Archived in project
Development

No branches or pull requests

2 participants