NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

Home Page:https://docs.taro.zone/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

eiinu opened this issue · comments

commented

相关平台

微信小程序

复现仓库

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 环境正常。