难搞哟
难搞哟
  • 发布:2023-05-25 17:50
  • 更新:2024-02-28 14:54
  • 阅读:296

【报Bug】滑动选择器 slider 在nvue页面下 首次进入 滑动无效 且设置初始值 滑动条不会变化 但后续进入都能正常使用

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.11

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 荣耀7

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
    <view>  
        <MS_BeautyModule-Camara ref="msCamara" ratio="9:16" style="width: 750rpx;height: 850rpx;"></MS_BeautyModule-Camara>  

        <text class="title">美颜类型</text>  

        <!-- 美颜种类盒子 -->  
        <scroll-view style="flex-direction: row;" scroll-x="true" scroll-left="20">  
            <view class="camear-type-box">  
                <view v-for="(item,index) in beautyIconArr" :key="index" class="camear-type-item"  
                    @click="camearTypeChange(item,index)">  
                    <image :src="beautyIconIndex == index ? item.iconCheckImage : item.iconImage" class="png"></image>  
                    <view>  
                        <text :class="beautyIconIndex == index ? 'camear-checked' : 'camear-defalut' ">{{item.title}}</text>  
                    </view>  
                </view>  
            </view>  
        </scroll-view>  

        <text class="title">美颜效果</text>  

        <view class="numBox">  
            <!-- <view v-for="(item,index) in NumArr" :key="index" class="num" @click="getCurren(item,index)"  
                :class="numIndex == index ? 'active' : ''">  
                <text class="numItem" :class="numIndex == index ? 'colors' : ''">{{ item }}%</text>  
            </view> -->  
            <slider :value="NumValue" @changing="sliderChange" activeColor="#F47361" min="0" max="100" block-size="26"  
                block-color="rgba(244, 115, 97, 1)" />  
            <text class="numValue">{{ NumValue }}</text>  
        </view>  

        <button class="bth" @click="save"><text class="texts">保存</text></button>  
    </view>  
</template>  
<script>  
    let camaraModule = uni.requireNativePlugin("MS_BeautyModule-Controller");  

    camaraModule.initSdkContext({  
        'sdk_lic_path': 'assets:/28008-984-bc67466365e92c478557f2065c3a38f9.lic',  
        'sdk_face_model_path': 'assets:/facemode/ms_face240_v2.0.7.model',  
        'sdk_fake_face_model_path': 'assets:/facemode/fakeface.dat',  
        'sdk_make_up_model_path': 'assets:/facemode/makeup2_240_v2.1.0.dat',  
        'sdk_hand_model_path': 'assets:/facemode/ms_hand_v1.0.0.model',  
        'sdk_human_seg_model_path': 'assets:/facemode/ms_humanseg_v1.0.13.model',  
    });  

    //打开日志  
    camaraModule.openLog({  
        'log_open': true  
    });  

    export default {  
        data() {  
            return {  
                NumValue: 0,  
                beautyIconArr: [{  
                        iconImage: '../../static/beauty-icon/icon-fuse.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-fuse.png',  
                        title: '美白',  
                        type: 'AR Sense',  
                        key: 'Beauty Whitening',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-hongrun.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-hongrun.png',  
                        title: '红润',  
                        type: 'AR Sense',  
                        key: 'Beauty Reddening',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-mopi.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-mopi.png',  
                        title: '磨皮',  
                        type: 'AR Sense',  
                        key: 'Beauty Strength',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-dayan.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-dayan.png',  
                        title: '大眼',  
                        type: 'AR Sense',  
                        key: 'Face Mesh Eye Size Degree',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-heiyanquan.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-heiyanquan.png',  
                        title: '黑眼圈',  
                        type: 'AR Sense',  
                        key: 'Advanced Beauty Remove Dark Circles Intensity',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-zhailian.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-zhailian.png',  
                        title: '瘦脸',  
                        type: 'AR Sense',  
                        key: 'Face Mesh Face Size Degree',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-xiaolian.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-xiaolian.png',  
                        title: '小脸',  
                        type: 'AR Sense',  
                        key: 'Face Mesh Face Length Degree',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-xiaba.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-xiaba.png',  
                        title: '下巴',  
                        type: 'AR Sense',  
                        key: 'Face Mesh Chin Length Degree',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    },  
                    {  
                        iconImage: '../../static/beauty-icon/icon-zuixing.png',  
                        iconCheckImage: '../../static/beauty-icon/icon-hot-zuixing.png',  
                        title: '嘴型',  
                        type: 'AR Sense',  
                        key: 'Face Mesh Mouth Size Degree',  
                        tp: 'float',  
                        value: 0,  
                        // curren: 0  
                    }  
                ],  
                beautyIconIndex: 0,  
                // NumArr: [0, 25, 50, 75, 100],  
                // numIndex: 0,  
                meiSheObj:{}  
            }  
        },  
        mounted() {  
            this.$refs.msCamara.startCapture()  
        },  
        onLoad() {  
            //基础值  
            camaraModule.setParam({  
                "type": "AR Scene",  
                "params": [  
                    // 瘦脸  
                    {  
                        "key": "Face Mesh Face Size Custom Package Id",  
                        "value": "assets:/63BD3F32-D01B-4755-92D5-0DE361E4045A.3.facemesh",  
                        "type": "package"  
                    },  
                    // 大眼  
                    {  
                        "key": "Face Mesh Eye Size Custom Package Id",  
                        "value": "assets:/71C4CF51-09D7-4CB0-9C24-5DE9375220AE.3.facemesh",  
                        "type": "package"  
                    },  
                    // 小脸   
                    {  
                        "key": "Face Mesh Face Length Custom Package Id",  
                        "value": "assets:/B85D1520-C60F-4B24-A7B7-6FEB0E737F15.3.facemesh",  
                        "type": "package"  
                    },  
                    // 下巴  
                    {  
                        "key": "Face Mesh Chin Length Custom Package Id",  
                        "value": "assets:/FF2D36C5-6C91-4750-9648-BD119967FE66.3.facemesh",  
                        "type": "package"  
                    },  
                    // 嘴型  
                    {  
                        "key": "Face Mesh Mouth Size Custom Package Id",  
                        "value": "assets:/A80CC861-A773-4B8F-9CFA-EE63DB23EEC2.3.facemesh",  
                        "type": "package"  
                    },  
                    //初始化基础值  
                    {  
                        "key": "Beauty Effect",  
                        "value": true,  
                        "type": "boolean",  
                    },  
                    {  
                        "key": "Beauty Shape",  
                        "value": true,  
                        "type": "boolean",  
                    },  
                    {  
                        "key": "Default Beauty Enabled",  
                        "value": true,  
                        "type": "boolean",  
                    },  
                    {  
                        "key": "Advanced Beauty Enable",  
                        "value": true,  
                        "type": "boolean",  
                    },  
                    {  
                        "key": "Face Mesh Internal Enabled",  
                        "value": true,  
                        "type": "boolean",  
                    },  
                    {  

                        "key": "Advanced Beauty Type",  
                        "value": 1,  
                        "type": "int",  
                    },  
                ]  
            });  
        },  
        methods: {  

            // 当前选中的美颜功能按钮  
            camearTypeChange(item, index) {  
                // console.log('选中特效', item);  
                this.beautyIconIndex = index  
                this.NumValue = this.beautyIconArr[this.beautyIconIndex].value  
                // this.numIndex = this.beautyIconArr[index].curren  
            },  

            // 滑动条  
            sliderChange(e) {  
                console.log(e);  
                console.log('value 发生变化:', e.detail.value)  
                console.log(typeof(e.detail.value));  
                this.NumValue = isNaN(e.detail.value) ? '0' : e.detail.value  
                this.beautyIconArr[this.beautyIconIndex].value = isNaN(e.detail.value) ? '0' : e.detail.value  

                this.addAr()  
            },  

            addAr() {  
                let Arr = this.beautyIconArr.map(item => {  
                    let objs = {  
                        key: item.key,  
                        value: item.value / 100,  
                        type: item.tp  
                    }  
                    return objs  
                })  

                let addObj = {  
                    type: "AR Scene",  
                    params: Arr  
                }  

                this.meiSheObj = addObj;  

                console.log('addObj', addObj);  

                // 添加美颜效果  
                camaraModule.addEffect(addObj);  

                //基础值  
                camaraModule.setParam({  
                    "type": "AR Scene",  
                    "params": [  
                        // 瘦脸  
                        {  
                            "key": "Face Mesh Face Size Custom Package Id",  
                            "value": "assets:/63BD3F32-D01B-4755-92D5-0DE361E4045A.3.facemesh",  
                            "type": "package"  
                        },  
                        // 大眼  
                        {  
                            "key": "Face Mesh Eye Size Custom Package Id",  
                            "value": "assets:/71C4CF51-09D7-4CB0-9C24-5DE9375220AE.3.facemesh",  
                            "type": "package"  
                        },  
                        // 小脸   
                        {  
                            "key": "Face Mesh Face Length Custom Package Id",  
                            "value": "assets:/B85D1520-C60F-4B24-A7B7-6FEB0E737F15.3.facemesh",  
                            "type": "package"  
                        },  
                        // 下巴  
                        {  
                            "key": "Face Mesh Chin Length Custom Package Id",  
                            "value": "assets:/FF2D36C5-6C91-4750-9648-BD119967FE66.3.facemesh",  
                            "type": "package"  
                        },  
                        // 嘴型  
                        {  
                            "key": "Face Mesh Mouth Size Custom Package Id",  
                            "value": "assets:/A80CC861-A773-4B8F-9CFA-EE63DB23EEC2.3.facemesh",  
                            "type": "package"  
                        },  
                        //初始化基础值  
                        {  
                            "key": "Beauty Effect",  
                            "value": true,  
                            "type": "boolean",  
                        },  
                        {  
                            "key": "Beauty Shape",  
                            "value": true,  
                            "type": "boolean",  
                        },  
                        {  
                            "key": "Default Beauty Enabled",  
                            "value": true,  
                            "type": "boolean",  
                        },  
                        {  
                            "key": "Advanced Beauty Enable",  
                            "value": true,  
                            "type": "boolean",  
                        },  
                        {  
                            "key": "Face Mesh Internal Enabled",  
                            "value": true,  
                            "type": "boolean",  
                        },  
                        {  

                            "key": "Advanced Beauty Type",  
                            "value": 1,  
                            "type": "int",  
                        },  
                    ]  
                });  

            }  
        },  
        onBackPress() {  
            console.log('页面退出了');  
            camaraModule.removeEffect({  
                "type": "AR Scene"  
            });  
        }  
    }  
</script>  
<style lang="scss" scoped>  
    // .camear-image {  
    //  width: 750rpx;  
    //  // height: 1000rpx;  
    //  border-radius: 28rpx;  
    // }  

    .camear-image {  
        width: 750rpx;  
        // height: 1000rpx;  
        border-radius: 28rpx;  
    }  

    .movable-box {  
        margin-top: 40rpx;  
        height: 160rpx;  
        padding: 0rpx 130rpx;  
    }  

    .camear-type-box {  
        flex-direction: row;  
        align-items: center;  
        // justify-content: space-around;  
        padding: 0rpx 16rpx;  

        .camear-type-item {  
            width: 140rpx;  
            align-items: center;  

            .png {  
                width: 80rpx;  
                height: 80rpx;  
            }  

            view {  
                margin-top: 20rpx;  
            }  
        }  

        .camear-checked {  
            color: #F47361;  
            text-align: center;  
        }  

        .camear-default {  
            color: #000000;  
            text-align: center;  
        }  
    }  

    .title {  
        font-weight: 600;  
        margin: 30rpx 0 20rpx;  
        color: #F47361;  
        line-height: 60rpx;  
        font-size: 38rpx;  
        margin-left: 40rpx;  
    }  

    .numBox {  
        // flex-direction: row;  
        // align-items: center;  
        // justify-content: space-around;  
        padding: 0 60rpx 10rpx;  
        text-align: center;  
        // justify-content: center;  

        .numValue {  
            color: rgba(244, 115, 97, 1);  
            font-size: 40rpx;  
            font-weight: $uni-semi;  
            line-height: 32rpx;  
            text-align: center;  
            padding-bottom: 10rpx;  
        }  

        .slider {  
            width: 300rpx;  
        }  

        .num {  
            align-items: center;  
            width: 80rpx;  
            height: 80rpx;  
            text-align: center;  
            // color: rgba(0, 0, 0, 0.40);  
            justify-content: center;  
            border-radius: 50%;  
            box-shadow: 0;  

            .numItem {  
                font-size: 26rpx;  
                line-height: 34rpx;  
                color: black;  
            }  
        }  

        .active {  
            background: #F47361;  
        }  

        .colors {  
            color: white !important;  
        }  
    }  

    .bth {  
        background-image: linear-gradient(to right, rgba(243, 165, 159, 1), rgba(244, 115, 97, 1));  
        padding: 22rpx 0;  
        margin-top: 30rpx;  
        border-radius: 45rpx;  
        box-shadow: 0 4rpx 8rpx 0rpx rgba(87, 11, 0, 0.10);  
        border: 0rpx;  
        width: 650rpx;  
        margin-left: 50rpx;  

        .texts {  
            font-weight: $uni-semi;  
            color: rgba(255, 255, 255, 1);  
            line-height: 48rpx;  
            font-size: 32rpx;  
        }  
    }  
</style>  

操作步骤:

首次打开该页面

预期结果:

需要能够正常滑动

实际结果:

首次打开无法正常滑动

bug描述:

滑动选择器 slider 在nvue页面下 首次进入 滑动无效 且设置初始值 滑动条不会变化 但后续进入都能正常使用 且首次进来拖动滑动条@changing 的返回值value都为null 但是后续进入都未正常

2023-05-25 17:50 负责人:无 分享
已邀请:
zfweihai

zfweihai

楼主解决了么?

  • HRK_01

    能否提供一下问题工程?

    2024-02-28 14:54

HRK_01

HRK_01

示例代码有误,无法复现该问题,请提供一个更加简单已复现问题的代码

  • zfweihai

    必须进入app的第一个页面才能复现,可以看看我提的bug.

    2024-02-28 22:02

要回复问题请先登录注册