your233
your233
  • 发布:2020-09-30 16:09
  • 更新:2020-12-03 18:17
  • 阅读:910

【报Bug】hbuilderx内置浏览器,input颜色设置了不变色,tabs里面放置多个subsection,切换时延迟

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window10

HBuilderX类型: 正式

HBuilderX版本号: 2.8.13

浏览器平台: Chrome

浏览器版本: hbuilderx内置浏览器

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="container">  
        <u-navbar back-text="返回" title="设置" :background="background" :border-bottom="borderBottom"></u-navbar>  
        <view class="user-section">  
        </view>  
        <view class="cover-container" :style="[{  
                transform: coverTransform,  
                transition: coverTransition  
            }]"  
         >  
            <image class="arc" src="/static/arc.png"></image>  
            <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">  
            <uni-card :isShadow="true" mode="basic" extra="" >  
                <u-tabs :list="list" active-color="#2979ff" :is-scroll="true" :current="current" @change="changeTabs"></u-tabs>  
                    <u-form-item v-if="current == '0'" label-width="240" :label-position="labelPosition" label="状态" prop="workState">  
                        <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.workState"  :current="model.workState" :list="['关机', '开机']" @change="cc1"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '0'" label-width="240" :label-position="labelPosition" label="选择" prop="upAndLow">  
                        <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.upAndLow"  :current="model.upAndLow" :list="['上', '下']" @change="cc2"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '0'" label="文字颜色" prop="currNum" label-width="240">  
                        <u-input :border="border" placeholder="请输入当前1-10" v-model="model.currNum" type="number" value="model.currNum"></u-input>  
                    </u-form-item>  

                    <u-form-item v-if="current == '5'" label="模式1" prop="fanMode1" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode1"  :current="model.fanMode1" :list="['自动', '高速' , '低速']" @change="cf1"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式2" prop="fanMode2" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode2"  :current="model.fanMode2" :list="['自动', '高速' , '低速']" @change="cf2"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式3" prop="fanMode3" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode3"  :current="model.fanMode3" :list="['自动', '高速' , '低速']" @change="cf3"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式4" prop="fanMode4" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode4"  :current="model.fanMode4" :list="['自动', '高速' , '低速']" @change="cf4"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式5" prop="fanMode5" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode5"  :current="model.fanMode5" :list="['自动', '高速' , '低速']" @change="cf5"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式6" prop="fanMode6" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode6"  :current="model.fanMode6" :list="['自动', '高速' , '低速']" @change="cf6"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式7" prop="fanMode7" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode7"  :current="model.fanMode7" :list="['自动', '高速' , '低速']" @change="cf7"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式8" prop="fanMode8" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode8"  :current="model.fanMode8" :list="['自动', '高速' , '低速']" @change="cf8"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式9" prop="fanMode9" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode9"  :current="model.fanMode9" :list="['自动', '高速' , '低速']" @change="cf9"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '5'" label="模式10" prop="fanMode10" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.fanMode10"  :current="model.fanMode10" :list="['自动', '高速' , '低速']" @change="cf10"></u-subsection>  
                    </u-form-item>  

                    <u-form-item v-if="current == '6'" label="1模式1" prop="bakingMode1" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode1=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c1"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式2" prop="bakingMode2" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"   :current="model.bakingMode2=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c2"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式3" prop="bakingMode3" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode3 =='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c3"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式4" prop="bakingMode4" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode4=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c4"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式5" prop="bakingMode5" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode5=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c5"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式6" prop="bakingMode6" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode6=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c6"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式7" prop="bakingMode7" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode7=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c7"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式8" prop="bakingMode8" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode8=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c8"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式9" prop="bakingMode9" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode9=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c9"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '6'" label="1模式10" prop="bakingMode10" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right"  :current="model.bakingMode10=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c10"></u-subsection>  
                    </u-form-item>  

                    <u-form-item v-if="current == '7'" label="2模式" prop="manualFan" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.manualFan" :current="model.manualFan" :list="['停止' ,'低速', '高速']" @change="cc3"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '7'" label="2模式2" prop="manualCom1" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.manualCom1"  :current="model.manualCom1" :list="['停止','启动']" @change="cc4"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '7'" label="2模式3" prop="manualCom2" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.manualCom2" :current="model.manualCom2" :list="['停止','启动']" @change="cc5"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '7'" label="2模式4" prop="manualEleHot1" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.manualEleHot1" :current="model.manualEleHot1" :list="['停止','启动']" @change="cc6"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '7'" label="2模式5" prop="manualEleHot2" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.manualEleHot2" :current="model.manualEleHot2" :list="['停止','启动']" @change="cc7"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '7'" label="2模式7" prop="manualDelWet" label-width="240">  
                    <u-subsection  active-color="#01b79d"  :animation="animation" slot="right" v-model="model.manualDelWet" :current="model.manualDelWet" :list="['停止','启动']" @change="cc8"></u-subsection>  
                    </u-form-item>  
                    <u-form-item v-if="current == '7'" label="" prop="manualDamperGear" label-width="240">  
                    <u-input :border="border" placeholder="" v-model="model.manualDamperGear" type="number"></u-input>  
                    </u-form-item>  
                <u-button v-if="userInfo.type=='1'"  @click="submit" type="warning" style="margin-top: 20upx;">保存设置</u-button>  
            </uni-card>  
            </u-form>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                model: {  
                    deviceId:'',deviceCode:'',sendState:'',workState:0,upAndLow:0,currNum:'',dryTempS1:'',dryTempS2:'',dryTempS3:'',dryTempS4:'',dryTempS5:'',dryTempS6:'',dryTempS7:'',dryTempS8:'',dryTempS9:'',dryTempS10:'',wetTempS1:'',wetTempS2:'',wetTempS3:'',wetTempS4:'',wetTempS5:'',wetTempS6:'',wetTempS7:'',wetTempS8:'',wetTempS9:'',wetTempS10:'',tempRiseRate1:'',tempRiseRate2:'',tempRiseRate3:'',tempRiseRate4:'',tempRiseRate5:'',tempRiseRate6:'',tempRiseRate7:'',tempRiseRate8:'',tempRiseRate9:'',tempRiseRate10:'',stableTempTime1:'',stableTempTime2:'',stableTempTime3:'',stableTempTime4:'',stableTempTime5:'',stableTempTime6:'',stableTempTime7:'',stableTempTime8:'',stableTempTime9:'',stableTempTime10:'',fanMode1:0,fanMode2:0,fanMode3:0,fanMode4:0,fanMode5:0,fanMode6:0,fanMode7:0,fanMode8:0,fanMode9:0,fanMode10:0,bakingMode1:0,bakingMode2:0,bakingMode3:0,bakingMode4:0,bakingMode5:0,bakingMode6:0,bakingMode7:0,bakingMode8:0,bakingMode9:0,bakingMode10:0,manualFan:0,manualCom1:0,manualCom2:0,manualEleHot1:0,manualEleHot2:0,manualDelWet:0,manualDamperGear:'',updateTime:''  
                },  
                rules: {  

                },  
                coverTransform: 'translateY(0px)',  
                coverTransition: '0s',  
                border:false,  
                labelPosition: 'left',  
                animation:false,  
                errorType: ['message'],  
                list: [],  
                data: [  
                    {name: '设定1'}  
                    ,{name: '设定2'}  
                    ,{name: '设定3'}  
                    ,{name: '设定4'}  
                    ,{name: '设定5'}  
                    ,{name: '设定6'}  
                    ,{name: '设定7'}  
                    ,{name: '设定8'}  
                ],  
                current: 0,  
                borderBottom: false,  
                background: {  
                    backgroundColor: '#0faeff'  
                }  
            }  
        },  
        onShow() {  

        },  
        onLoad(option) {  
            this.list = this.data;  
        },  
        onReady() {  
            this.$refs.uForm.setRules(this.rules);  
        },  
        computed: {},  
        methods: {  
            submit() {  

            },  
            navTo(url) {  
                if (!this.hasLogin) {  
                    url = '/pages/public/login';  
                }  
                uni.navigateTo({  
                    url: url,  
                    complete: (res) => {  
                        //console.log(res);  
                    }  
                })  
            },  
            changeTabs(index) {  
                this.current = index;  
            }  

        }  
    }  
</script>  
<style lang='scss'>  
    %flex-center {  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  

    %section {  
        display: flex;  
        justify-content: space-around;  
        align-content: center;  
        background: #fff;  
        border-radius: 10upx;  
    }  

    .user-section {  
        height: 180upx;  
        padding: 100upx 30upx 0;  
        background-color: #0faeff;  
        position: relative;  

        .bg {  
            position: absolute;  
            left: 0;  
            top: 0;  
            width: 100%;  
            height: 100%;  
            filter: blur(1px);  
            opacity: .7;  
        }  
    }  

    .user-info-box {  
        height: 180upx;  
        display: flex;  
        align-items: center;  
        position: relative;  
        z-index: 1;  

        .portrait {  
            width: 130upx;  
            height: 130upx;  
            border: 5upx solid #fff;  
            border-radius: 50%;  
        }  

        .username {  
            font-size: $font-lg + 6upx;  
            color: $font-color-dark;  
            margin-left: 20upx;  
        }  
    }  

    .cover-container {  
        background: $page-color-base;  
        margin-top: -150upx;  
        padding: 0 10upx;  
        position: relative;  
        background: #f5f5f5;  
        padding-bottom: 20upx;  

        .arc {  
            position: absolute;  
            left: 0;  
            top: -34upx;  
            width: 100%;  
            height: 36upx;  
        }  
    }  

    .tj-sction {  
        @extend %section;  

        .tj-item {  
            @extend %flex-center;  
            flex-direction: column;  
            height: 140upx;  
            font-size: $font-sm;  
            color: #75787d;  
        }  

        .title {  
            font-size: 14px;  
            color: $font-color-dark;  
        }  

        .num {  
            font-size: 12px;  
            color: #888;  
            margin-bottom: 8upx;  
        }  
    }  

    .tj-sction1 {  
        @extend %section;  

        .tj-item1 {  
            @extend %flex-center;  
            flex-direction: column;  
            height: 100upx;  
            font-size: $font-sm;  
            color: #75787d;  
        }  

        .title1 {  
            font-size: 13px;  
            color: #888;  
            margin: 0upx 5upx;  
        }  

        .num1 {  
            color: $font-color-dark;  
            font-size: 14px;  
            margin-bottom: 0upx 10upx;  
        }  
    }  

    .footer-box {  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        justify-content: space-between;  
        flex-direction: row;  

    }  

    .footer-box__item1 {  
        align-items: center;  
        padding: 2px 0;  
        font-size: 32upx;  
        color: #2C405A;  
    }  

    .footer-box__item2 {  
        align-items: center;  
        padding: 2px 0;  
        font-size: 32upx;  
        color: #2C405A;  
    }  

    .box-shadow {  
        box-shadow: 4upx 4upx 10upx rgba(0, 0, 0, 0.2);  
    }  

    .details-card {  
        height: 200upx;  
        width: 100%;  
        border: 1upx solid #999999;  
        border-radius: 10upx;  
    }  

    .flex {  
        display: flex;  
    }  

    .flex-1 {  
        flex: 1;  
        flex-direction: column;  
    }  

    +.flex-2 {  
        flex: 2;  
    }  

    .text-title {  
        font-size: 26upx;  
        color: #333333;  
    }  

    .text-content {  
        font-size: 26upx;  
        color: #999999;  
    }  
    input{color:#01b79d!important;}  
</style>  

操作步骤:

贴上代码,新增uni-app项目,导入uview-ui,查看input和tabs的变化

预期结果:

预期效果,input里面字体变成浅绿色,切换tabs的时候正常切换

实际结果:

input颜色没有变化,tabs切换的时候有延迟,会显示上一个tabs里面的按钮

bug描述:

bug1: 设置css input{color:#01b79d!important;} 无效,在内置浏览器里面input里面的文字还是黑色
bug2: tabs和subsection合用的时候,subsection会显示延迟

2020-09-30 16:09 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

不用内置浏览器就正常吗?

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