taro vue3 微信小程序 input ios输入卡顿 光标卡顿

[luhualong]

相关平台

微信小程序

小程序基础库: 2.21.0 使用框架: Vue 3

复现步骤

<template>
  <custom-wrapper>
    <input type="text" placeholder="没有v-model" />
  </custom-wrapper>
  <custom-wrapper>
    <input type="text" placeholder="有v-model" v-model="msg" />
  </custom-wrapper>
  <input type="text" placeholder="没有包裹custom-wrapper" />
</template>

<script>
import { ref } from "vue";
import "./index.scss";

export default {
  setup() {
    const msg = ref("");
    return {
      msg,
    };
  },
};
</script>

期望结果

输入流畅、光标不卡顿

实际结果

输入卡顿且光标卡顿

环境信息

👽 Taro v3.3.14


  Taro CLI 3.3.14 environment info:
    System:
      OS: macOS 11.5.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 14.7.0 - ~/.nvm/versions/node/v14.7.0/bin/node
      Yarn: 1.22.4 - ~/.nvm/versions/node/v14.7.0/bin/yarn
      npm: 6.14.7 - ~/.nvm/versions/node/v14.7.0/bin/npm
    npmPackages:
      @tarojs/components: 3.3.15 => 3.3.15 
      @tarojs/mini-runner: 3.3.15 => 3.3.15 
      @tarojs/runtime: 3.3.15 => 3.3.15 
      @tarojs/taro: 3.3.15 => 3.3.15 
      @tarojs/webpack-runner: 3.3.15 => 3.3.15 
      babel-preset-taro: 3.3.15 => 3.3.15 
      eslint-config-taro: 3.3.15 => 3.3.15 

[luhualong]

https://user-images.githubusercontent.com/50528346/143220726-1e8a22be-b3a7-4992-87b9-34b35579a7ca.mp4

[Chen-jj]

iOS 多少？

[moruifei]

iOS 多少？ 你好，这边iphone X iphone11上都有这个问题。

[luhualong]

我这边用了 iPhone7 14.2 和 iPhone XR 15.1 测试的 都有这个问题

---

发件人: moruifei @.> 发送时间: 2021年11月29日 9:42 收件人: NervJS/taro @.> 抄送: luhualong @.>; Author @.> 主题: Re: [NervJS/taro] taro vue3 微信小程序 input ios输入卡顿 光标卡顿 (Issue #10733)

iOS 多少？ 你好，这边iphone X iphone11上都有这个问题。

― You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/NervJS/taro/issues/10733#issuecomment-981219984, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AMBQAWWZDPPBXC2PHOUDEMDUOLLBJANCNFSM5IVVZ7SA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[luhualong]

我这边用了 iPhone7 14.2 和 iPhone XR 15.1 测试的 都出现了这个问题

---

发件人: moruifei @.> 发送时间: 2021年11月29日 9:42 收件人: NervJS/taro @.> 抄送: luhualong @.>; Author @.> 主题: Re: [NervJS/taro] taro vue3 微信小程序 input ios输入卡顿 光标卡顿 (Issue #10733)

iOS 多少？ 你好，这边iphone X iphone11上都有这个问题。

― You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/NervJS/taro/issues/10733#issuecomment-981219984, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AMBQAWWZDPPBXC2PHOUDEMDUOLLBJANCNFSM5IVVZ7SA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Sincenir]

我这里 iphone xr 小米10 也都有这个问题。 开发者工具里正常。

[Sincenir]

我这里仔细研究了一下，其实不只是光标卡顿的问题，它会导致新输入的内容覆盖掉之前输入的内容。

我猜测是事件代理出了问题，我不知道 taro 是通过的什么处理的事件，感觉是 input 事件调用延迟，导致前一次输入还没有响应后一次的输入已经被调用。 这将会导致新的事件调用读取的是上上次的 value 数据，进而导致 value 更新出现问题。 @Chen-jj

[Chen-jj]

我使用楼主的 demo 没有复现，可以设置 Taro.options.debug = true 后看看 setData 的数据值有没有问题

[moruifei]

我这里使用的Taro3 + react , 在列表（items）里渲染每个item里都有Input。 数据量少时还好，50+ 再输入值就会闪动，ios设备上会有这个问题。安卓没复现

[Chen-jj]

我这里使用的Taro3 + react , 在列表（items）里渲染每个item里都有Input。 数据量少时还好，50+ 再输入值就会闪动，ios设备上会有这个问题。安卓没复现

可以上个 demo 看看吗

[Sincenir]

我使用楼主的demo 没有复现，可以设置Taro.options.debug = true后查看setData的数据值有没有问题

使用 input框，通过快速输入数字。 @Chen-jj 您可以拉去我的组件库尝试是否可以复现问题： npm install taro-ui-sincenir 使用方法和taro-ui相同。 import { SiInput } from "taro-ui-sincenir"; import "taro-ui-sincenir/dist/styles/radio.less"; import "taro-ui-sincenir/dist/styles/input.less";

<SiInput value={item.value} placeholder={item.placeholder} disabled={disabled} onChange={v => handleChangeValue(v)} />

[303394539]

这个问题早期在使用taro-ui就发现了，当时没有办法，只能自己通过taro-ui的className结合components的Input自己重写了一个独立的Input组件，通过不在组件内部使用state，直接操作ref的value来解决。

[moruifei]

这个问题早期在使用taro-ui就发现了，当时没有办法，只能自己通过taro-ui的className结合components的Input自己重写了一个独立的Input组件，通过不在组件内部使用state，直接操作ref的value来解决。

我这里仔细研究了一下，其实不只是光标卡顿的问题，它会导致新输入的内容覆盖掉之前输入的内容。

我猜测是事件代理出了问题，我不知道 taro 是通过的什么处理的事件，感觉是 input 事件调用延迟，导致前一次输入还没有响应后一次的输入已经被调用。 这将会导致新的事件调用读取的是上上次的 value 数据，进而导致 value 更新出现问题。 @Chen-jj

大兄弟可否加个微信交流一下: moruifei1994

[moruifei]

这个问题早期在使用taro-ui就发现了，当时没有办法，只能自己通过taro-ui的className结合components的Input自己重写了一个独立的Input组件，通过不在组件内部使用state，直接操作ref的value来解决。

taro-ui和taro的Input 应该都是基于微信原生Input封装的，都会有这个问题。我的场景是列表里渲染很多个Input，每个Input的更新值放到redux里。数据量越大问题越明显，不知道是不是组件重新渲染造成的。

[303394539]

这个问题早期在使用taro-ui就发现了，当时没有办法，只能自己通过taro-ui的className结合components的Input自己重写了一个独立的Input组件，通过不在组件内部使用state，直接操作ref的value来解决。

taro-ui和taro的Input 应该都是基于微信原生Input封装的，都会有这个问题。我的场景是列表里渲染很多个Input，每个Input的更新值放到redux里。数据量越大问题越明显，不知道是不是组件重新渲染造成的。

其实就是用state改变input的value会出现这个情况，你倒是可以试试用input的ref直接设置value来试看能否改善

[Sincenir]

这个问题早期在使用taro-ui就发现了，当时没有办法，只能自己通过taro-ui的className结合components的Input自己重写了一个独立的Input组件，通过不在组件内部使用state，直接操作ref的value来解决。

taro-ui和taro的Input 应该都是基于微信原生Input封装的，都会有这个问题。我的场景是列表里渲染很多个Input，每个Input的更新值放到redux里。数据量越大问题越明显，不知道是不是组件重新渲染造成的。

其实就是用state改变input的value会出现这个情况，你倒是可以试试用input的ref直接设置value来试看能否改善

我大概懂了问题的来源。 我想请问一下您是 taro 的开发者吗？

该问题再可预期的未来，暂未有更好的解决方案吗？

[Chen-jj]

我使用楼主的demo 没有复现，可以设置Taro.options.debug = true后查看setData的数据值有没有问题

使用 input框，通过快速输入数字。 @Chen-jj 您可以拉去我的组件库尝试是否可以复现问题： npm install taro-ui-sincenir 使用方法和taro-ui相同。 import { SiInput } from "taro-ui-sincenir"; import "taro-ui-sincenir/dist/styles/radio.less"; import "taro-ui-sincenir/dist/styles/input.less";

<SiInput value={item.value} placeholder={item.placeholder} disabled={disabled} onChange={v => handleChangeValue(v)} />

@Sincenir 使用你的 demo，在 iPhoneX 上同样没有复现。

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { SiInput } from "taro-ui-sincenir";
import Taro from '@tarojs/taro'
import "taro-ui-sincenir/dist/styles/radio.less";
import "taro-ui-sincenir/dist/styles/input.less";

export default class Index extends Component {
  state = {
    value: ''
  }
  handleChangeValue = v => {
    this.setState({
      value: v
    })
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <SiInput
          value={this.state.value}
          placeholder='input...'
          onChange={v => this.handleChangeValue(v)}
        />
      </View>
    )
  }
}

按照我上面的回复，看看 setData 有没有错误吧。

[bluescurry]

我使用楼主的demo 没有复现，可以设置Taro.options.debug = true后查看setData的数据值有没有问题

使用 input框，通过快速输入数字。 @Chen-jj 您可以拉去我的组件库尝试是否可以复现问题： npm install taro-ui-sincenir 使用方法和taro-ui相同。 import { SiInput } from "taro-ui-sincenir"; import "taro-ui-sincenir/dist/styles/radio.less"; import "taro-ui-sincenir/dist/styles/input.less"; <SiInput value={item.value} placeholder={item.placeholder} disabled={disabled} onChange={v => handleChangeValue(v)} />

@Sincenir 使用你的 demo，在 iPhoneX 上同样没有复现。

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { SiInput } from "taro-ui-sincenir";
import Taro from '@tarojs/taro'
import "taro-ui-sincenir/dist/styles/radio.less";
import "taro-ui-sincenir/dist/styles/input.less";

export default class Index extends Component {
  state = {
    value: ''
  }
  handleChangeValue = v => {
    this.setState({
      value: v
    })
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <SiInput
          value={this.state.value}
          placeholder='input...'
          onChange={v => this.handleChangeValue(v)}
        />
      </View>
    )
  }
}

按照我上面的回复，看看 setData 有没有错误吧。

@Chen-jj 你用的手机系统是ios14吗，用14的试试吧

使用 CustomWrapper 组件包裹 Input 后得到解决。 参考：https://github.com/NervJS/taro/issues/9664

[WTW0313]

手机为iPhone 12 pro 系统版本为iOS 15.6.1 在快速输入的时候会出现光标前移后又跳回文字最后面的闪动 和@luhualong录屏的情况一致 尝试了使用ref赋值 依然存在问题。

不确定是不是因为封装的问题，同样的input组件在别的项目中表现是正常的。。。

[effortcheep]

建议用防抖函数自己处理。

[Sincenir]

我用楼主的demo没有复现，可以设置Taro.options.debug = true后查看setData的数据值有没有问题

使用输入框，通过快速输入数字。@Chen-jj您可以拉去我的组件库试试是否可以复现问题： npm install taro-ui-sincenir 使用方法和taro-ui相同。导入“taro-ui-sincenir/dist/styles/radio.less”；导入“taro-ui-sincenir/dist/styles/input.less”； <SiInput value={item.value} placeholder={item.placeholder} disabled={disabled} onChange={v => handleChangeValue(v)} />

@Sincenir使用你的demo，在iPhoneX上一样没有恢复。

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { SiInput } from "taro-ui-sincenir";
import Taro from '@tarojs/taro'
import "taro-ui-sincenir/dist/styles/radio.less";
import "taro-ui-sincenir/dist/styles/input.less";

export default class Index extends Component {
  state = {
    value: ''
  }
  handleChangeValue = v => {
    this.setState({
      value: v
    })
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <SiInput
          value={this.state.value}
          placeholder='input...'
          onChange={v => this.handleChangeValue(v)}
        />
      </View>
    )
  }
}

点击我上面的回复，看setData有没有错误吧。

我尝试过了， class 组件没有问题，函数式组件有问题，直接引用原生的 Input，快速输入也会出现覆盖的问题。 taro version: 3.0.21

import React, { useState } from "react";
import { View, Input } from "@tarojs/components";

export default () => {
  const [value, setValue] = useState("");

  return (
    <View>
      <Input value={value} onInput={e => setValue(e.target.value)}></Input>
    </View>
  );
};

[wyiming]

我也遇到同样的问题 经测试发现去掉编译之后标签的两个属性就不卡顿了 不清楚是什么问题

[axetroy]

我也遇到同样的问题 经测试发现去掉编译之后标签的两个属性就不卡顿了 不清楚是什么问题

这么做之后，事件监听就失效了

[TaroXin]

@Chen-jj

<template>
  测试页面

  <input v-for="i in 500" :key="i" :placeholder="`${i},你好`">
</template>

这个模板在Vue3的项目中必现，组件数量越多越卡，原生组件并没有类似的问题，只要使用了 Taro 的话，input组件就被覆盖，并绑定了很多的事件，导致异常卡顿

麻烦提供一个方法，可以覆盖绑定事件，或者可以直接使用微信原生 input

[sgssxf]

这个问题一直没有好的解决办法吗？

[Fairfarren]

24年了，有办法解决吗？我在iPhone7上能复现

[MagicReader]

复现了！

[QingquanQiu]

问题：利用taro 3.6.22 和 3.6.32两个版本，都在微信开发者工具【真机调试】出现input框连续输入或者快速删除时出现滞后连续闪动的问题。表现如上面各位仁兄视频所示。 结论：别管【【【真机调试】】】怎么样闪，发布一个【【【体验版本】】】，体验版本就ok了。 祭奠我自闭的一天。