注册登录

kysin

发布：2020-08-04 10:09
更新：2020-09-02 17:40
阅读：1058

【报Bug】input输入框HX2.8.3仍旧闪烁

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 2.8.3

手机系统： Android

手机系统版本号： Android 10

手机厂商：小米

手机机型：米9

页面类型： vue

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

<input   
                        v-model="info.ZHAB00A001"  
                        class="tui-input"  
                        placeholder="请输入项目名称"   
                        />

预期结果：

input输入正常

实际结果：

input输入闪烁

bug描述：

Input框输入仍旧闪烁，HX是最新版，之前官方貌似修复过一次，要好那么一点点了，但是还是疯狂的闪烁，在输入数字的时候尤为明显，如果只是@input事件，则不会闪烁，uni的v-model是有一定时间的延迟的(从input(e)到:value=e.target.value)，官方尽快把这个BUG完全处理了吧！！！！！

input闪烁.zip

2020-08-04 10:09 负责人:无分享

4 个回复

DCloud_UNI_GSQ

其他机型表现如何？

kysin (作者)

测试过荣耀手机同样会闪烁，其他品牌的机器没测试过

2020-08-04 14:29
DCloud_UNI_GSQ

回复 kysin: 出现问题的页面是否有使用城市选择之类的组件？

2020-08-04 14:35
kysin (作者)

回复 DCloud_UNI_GSQ: 是的的，用了https://ext.dcloud.net.cn/plugin?id=1084这个组件

2020-08-04 14:39

kysin (作者)

回复 DCloud_UNI_GSQ: 页面里用了我很多picker，因为表单需要用到，包括

<tui-list-cell :hover="false">  

                    <view class="tui-line-cell">  

                        <view class="tui-title">初现时间年</view>  

                        <picker   

                        mode="date"   

                        fields='year'  

                        start="2000-01-01"   

                        end="2099-12-30"   

                        @change="((e)=>{chooseTime(e,'ZHAB00A111')})"  

                        class="tui-input">  

                            <input  

                             v-model="info.ZHAB00A111"   

                            disabled="true"   

                            placeholder="请选择初现时间年" />  

                        </picker>  

                    </view>  

                </tui-list-cell>  

<tui-list-cell :hover="false">  

                    <view class="tui-line-cell">  

                        <view class="tui-title">省<text>(必填项)</text></view>  

                        <input   

                        v-model="info.ZHAB00A024"    

                        class="tui-input"   

                        disabled="true"   

                        placeholder="请选择省"   

                        @tap="openAddres"  

                        />  

                    </view>  

                </tui-list-cell>  

<tui-list-cell :hover="false">  

                    <view class="tui-line-cell">  

                        <view class="tui-title">地下水类型<text>(必填项)</text></view>  

                        <input   

                        v-model="info.ZHAB00A038"   

                        disabled="true"   

                        class="tui-input"   

                        placeholder="请选择地下水类型"   

                        @tap="show('ZHAB00A038')" />  

                    </view>  

                </tui-list-cell>  



        <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirmCity" themeColor="#007AFF"></simple-address>  

<evan-checkbox-popup   

        ref="ZHAB00A038"   

        @confirm="onConfirm"   

        :options="selectData.ZHAB00A038"   

        optionLabel="text"   

        optionValue="value"  

        ></evan-checkbox-popup>  

<tui-list-cell :hover="false">  

                    <view class="tui-line-cell">  

                        <view class="tui-title">初现时间年</view>  

                        <picker   

                        mode="date"   

                        fields='year'  

                        start="2000-01-01"   

                        end="2099-12-30"   

                        @change="((e)=>{chooseTime(e,'ZHAB00A135')})"  

                        class="tui-input">  

                            <input v-model="info.ZHAB00A135"   



                            disabled="true"   

                            placeholder="请选择初现时间年" />  

                        </picker>  

                    </view>  

                </tui-list-cell>

1种uni自带的时间Picker,1种自己封装的picker，2种插件市场的simple-address，evan-checkbox-poup

我的这个页面大概有200多个字段，其中一半多是用Picker包裹的。

如果是在字段较少的页面好像没有这个问题

2020-08-04 14:49

DCloud_UNI_GSQ

回复 kysin: 你注释掉 simple-address 测试一下

2020-08-04 15:20
kysin (作者)

回复 DCloud_UNI_GSQ: 我注释掉了，一样的闪烁

2020-08-04 15:34
DCloud_UNI_GSQ

回复 kysin: 有没有其他类似这个城市选择包含大量数据的地方

2020-08-04 17:14
kysin (作者)

回复 DCloud_UNI_GSQ: 其他picker都是内容比较简单的picker,目前看来只有城市选择器才有大量数据

2020-08-04 20:07
DCloud_UNI_GSQ

回复 kysin: 把和城市选择相关的都注释掉没

2020-08-04 20:09
kysin (作者)

回复 DCloud_UNI_GSQ: 注释掉了还是闪烁

2020-08-04 21:17
kysin (作者)

回复 DCloud_UNI_GSQ: 能解决这个问题吗

2020-08-05 14:40
DCloud_UNI_GSQ

回复 kysin: 有没有测试工程，我排查一下

2020-08-05 14:48
kysin (作者)

回复 DCloud_UNI_GSQ: 链接：https://pan.baidu.com/s/1FaH5rEwRDoax3AyqP-NzWw

提取码：0ndl

2020-08-12 23:14
kysin (作者)

回复 DCloud_UNI_GSQ: 才想起在论坛提交了这个问题，我发你了，请查收下

2020-08-12 23:15
kysin (作者)

回复 DCloud_UNI_GSQ: 滴滴

2020-08-13 13:11

旺仔小牛奶

这个问题解决了吗

DCloud_UNI_GSQ

如果你也遇到的话，可以详细的描述一下

2020-08-10 17:15
kysin (作者)

回复 DCloud_UNI_GSQ: 我把工程放问题附件了，你看下

2020-08-13 20:11
DCloud_UNI_GSQ

回复 kysin: 收到

2020-08-14 14:18

DCloud_UNI_GSQ

找到了是 selectData（dict.js）导致的，由于数据是差量同步的，当有数据变更时会进行差量对比，对于大量数据的对比比较耗时导致了 input 的卡顿。
建议将使用大量数据的部分单独封装成一个子组件。

kysin (作者)

我刚刚测试了，我把所有用到dict.js的部分都注释了，相当于剩下的都是input输入框，发现输入数字还是闪烁

2020-08-14 20:34

kysin (作者)

<tui-list-cell :hover="false">  

    <view class="tui-line-cell">  

        <view class="tui-title">构造部位</view>  

        <input   

        v-model="info.ZHAB00A033"    

        class="tui-input"   

        placeholder="请输入构造部位"   

        />  

    </view>  

</tui-list-cell>

这种输入框达到一定数量就会开始闪烁

2020-08-14 20:52

kysin (作者)

大概50个左右就很明显了

2020-08-14 20:54
kysin (作者)

再看下呢

2020-08-20 10:08
kysin (作者)

还是在闪，输入反应慢，我换成@input和:value就没问题了

2020-11-11 23:00

6***@qq.com

弃用v-model,使用@input

methods(){
onInput(e){
this.value = e
}
}
这么改就好用了= =

kysin (作者)

确实，在闪烁的页面我弃用v-model了

2020-10-14 02:08

该问题目前已经被锁定, 无法添加新回复

【报Bug】input输入框HX2.8.3仍旧闪烁

操作步骤：

`<input v-model="info.ZHAB00A001" class="tui-input" placeholder="请输入项目名称" />`

预期结果：

input输入正常

实际结果：

input输入闪烁

bug描述：

4 个回复

公告

相关问题

【报Bug】input输入框HX2.8.3仍旧闪烁

操作步骤： <input v-model="info.ZHAB00A001" class="tui-input" placeholder="请输入项目名称" />

预期结果： input输入正常

实际结果： input输入闪烁

bug描述：

与内容相关的链接

4 个回复

公告

相关问题

操作步骤：

`<input v-model="info.ZHAB00A001" class="tui-input" placeholder="请输入项目名称" />`

预期结果：

input输入正常

实际结果：

input输入闪烁