收藏
回答

小程序input输入框双向绑定后真机调试输入内容闪烁?

就比如输入一个手机号 123456789 他会闪烁很多次 然后最终导致输入的内容不全

回答关注问题邀请回答
收藏

8 个回答

  • 姑苏洛言
    姑苏洛言
    2020-09-08

    可以去掉setData,不使用啊。直接使用this.data.phone = e.detail.value进行赋值即可

    2020-09-08
    有用 2
    回复 3
    • 。
      2020-09-08
      是解决了 闪烁的问题 但跟我们的需求 不符合 谢谢
      2020-09-08
      回复
    • 姑苏洛言
      姑苏洛言
      2020-09-08回复
      你们的需求是什么
      2020-09-08
      回复
    • 浮生
      浮生
      2021-08-18
      您好大佬,我想问下我也遇到这个问题,但是直接使用this.data.phone = e.detail.value进行赋值不行,,而且这个问题只在IOS系统存在,安卓就不会出现闪动的情况,一开始我以为是我手机(iphone7)卡顿,但是换了一个iphone7P还是有这个问题
      2021-08-18
      回复
  • 就这样🐳🐳
    就这样🐳🐳
    2020-09-10

    我也遇到这个问题了。

    我现在都没有办法理解value这个属性是干啥了。

    我现在观察到的 value 属性和输入框中的显示是绑定的。但是又不是双向绑定,意思就是你不在bindInput方法里边去赋值,单纯的在输入框里打字,value属性里的值是不会改变的,只能通过bindInput方法赋值。

    但是在bindInput方法里赋值,又会出现闪烁的问题。

    我现在有一个需要点击输入框后边的一个 x 号,去清空输入框这个需求没法实现了。。。

    2020-09-10
    有用 4
    回复
  • 隔壁老李
    隔壁老李
    2021-01-04

    我也是碰到了这个问题 请问现在有解决方法了吗?

    界面上value绑定的默认值 然后bindinput事件输入数字或者输入其他 只要输入的太快了就会不停的跳动

    setdata就是有这个问题,但是不用setdata又实现不了自己的业务

    2021-01-04
    有用 2
    回复
  • 。
    2020-09-08

    这个原因是我用了setData 重赋值 有没有解决办法

    2020-09-08
    有用 2
    回复
  • 陈晓峰 Sylvan
    陈晓峰 Sylvan
    2021-10-27
    // 自定义 input
    Component({
      data: {
        val: null,
      },
      properties: {
        value: {
          type: String,
          observer(nval) {
             // 
            if (nval !== this.data.val) {
              this.setData({ val: nval })
            }
          },
        },
        type: {
          type: String,
        },
        placeholder: {
          type: String,
        },
      },
    
    
      methods: {
        handleInput(e: WechatMiniprogram.TouchEvent) {
          const { value } = e.detail
          this.data.val = value
          this.triggerEvent('input', e)
        },
      },
    })
    
    2021-10-27
    有用 1
    回复
  • Kenny
    Kenny
    2021-07-28

    在input中去掉传入值, 让它变成非受控组件

     <Input
      placeholder="placeholder"
      className="search"
      // value={inputValue}.  => 去掉这一行
      type="text"
      onInput={this.onKeyWordInput}
    ></Input>
    
    setData正常用,这样你也可以实现业务的同时也能正常显示
    
    2021-07-28
    有用 1
    回复 2
    • 2022-02-24
      不错,这样能解决我当前场景下的问题
      2022-02-24
      回复
    • A.Johnny
      A.Johnny
      2023-02-06
      有一个需求 希望通过wx:for让input展示默认内容 没有value属性 有什么其他办法吗
      2023-02-06
      回复
  • 戒糖
    戒糖
    2023-12-07

    这种情况可能是由于在快速输入数字时,bindinput 事件触发的频率太高,导致页面渲染速度跟不上输入速度,从而导致数字跳闪。加一个定时器就行了。

      timer: null,

      driverPhoneInput: function (e) {

        clearTimeout(this.timer);

        this.timer = setTimeout(() => {

          this.setData({

            driverPhone: e.detail.value

          });

        }, 500);

      },


    2023-12-07
    有用
    回复
  • bibolibo
    bibolibo
    2021-07-05

    可以尝试使用简易双向绑定

    https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

    2021-07-05
    有用
    回复 1
    • 2022-02-24
      根据效果来看,这种双向绑定内部依然是使用的setData,闪烁依然存在
      2022-02-24
      回复
登录 后发表内容
问题标签