向前滚
向前滚
  • 发布:2022-04-01 14:13
  • 更新:2022-04-02 15:38
  • 阅读:384

input不受控

分类:uni-app

比如当我有个逻辑,输入框的值 min=10 max=100 ,当我输入的value 大于100就显示100,当我输入小于10就显示10。
实际上并不会像web那样,uni-app封装的输入框,根本不受控。你需要两次设置的值不一样才会在界面显示,这就导致需要先给 value 设置成0,然后nextTick里面设置成正确值,这样才能保证每次都正确更新。这样体验又很不好当我一直输入大于100数字的时候,很明显就能看到界面跳动,从0变成100。

希望能提供强制更新显示视图的方法。

0 关注 分享

要回复文章请先登录注册

向前滚

向前滚 (作者)

回复 者行孙 :
谢谢老哥
2022-04-02 15:38
者行孙

者行孙

回复 者行孙 :
淦,这排版见了鬼,想要编辑也不行,删除评论也找不到
2022-04-01 15:49
者行孙

者行孙

因为uniapp自己做了diff。
如果input组件通过事件返回的值在经过人为约束后与之前的值一样,则不会更新视图,即便input里实际的值与data里的值大相径庭。
至于触发更新的方法则如你所说的。
但不一定要设置0,设置0会明显感到跳动。你可以先把值设置为用户实际输入的值,随后再在 nextTick 里设置为经过约束的值,这样体验比起先设置为0要好的多。
```
onInput(e){
this.value = e.detail.value;
this.$nextTick(() => {
this.value = Math.min(100, Math.max(10, e.detail.value));
});
}
```
2022-04-01 15:47