uni-app uni-data-select的小问题

uni-app uni-data-select的小问题 产品分类：uniapp/H5
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：4.75
浏览器平台：微信内置浏览器
项目创建方式：HBuilderX

开发环境 版本号 项目创建方式
Windows 4.75 HBuilderX

示例代码：

<template>  
    <view class="container">  
        <uni-card spacing="10px" margin="10px" title="报考-开考-继考">  
            <uni-forms>  
                <uni-forms-item label="用户id" required>  
                    <uni-easyinput v-model="formData.user_id" placeholder="请输入用户id" />  
                </uni-forms-item>  
                <uni-forms-item label="考试安排id" required>  
                    <uni-easyinput v-model="formData.exam_schedules_id" placeholder="请输入考试安排id" />  
                </uni-forms-item>  
            </uni-forms>  

            <button type="primary" @click="handle_registerExam">报考</button>  
            <button @click="handle_startExam">开考</button>  
            <button @click="handle_continueExam">继考</button>  
        </uni-card>  

        <uni-card spacing="10px" margin="10px" title="答题卡">  
            <uni-forms>  
                <uni-forms-item label="题目下标" required>  
                    <uni-easyinput v-model="formData.current" placeholder="请输入题目下标" />  
                </uni-forms-item>  
                <uni-title type="h1" :title="title" color="#027fff"></uni-title>  
                <uni-data-select v-model="formData.user_answer" :localdata="answer_localdata" multiple></uni-data-select>  
            </uni-forms>  

            <button @click="handle_answerQuestion">答题</button>  
            <button @click="handle_submitExam">交卷</button>  
        </uni-card>  

        <uni-card spacing="10px" margin="10px" title="显示操作的返回结果">  
            <view class="result-content">  
                <scroll-view class="result-scroll" scroll-y="true">  
                    <text class="result-text">{{ result || '暂无操作结果' }}</text>  
                </scroll-view>  
            </view>  
        </uni-card>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            formData: {  
                user_id: '',  
                exam_schedules_id: '',  
                user_answer: [],  
            },  
            result: '',  

            title: '这是一个题目',  
            answer_localdata: [{  
                    "value": 0,  
                    "text": "A"  
                },  
                {  
                    "value": 1,  
                    "text": "B"  
                },  
                {  
                    "value": 2,  
                    "text": "C"  
                },  
                {  
                    "value": 3,  
                    "text": "D"  
                },  
                {  
                    "value": 4,  
                    "text": "E"  
                },  
                {  
                    "value": 5,  
                    "text": "F"  
                },  
                {  
                    "value": 6,  
                    "text": "G"  
                }  
            ],  
        }  
    },  
    methods: {  
        handle_registerExam() {},  
        handle_startExam() {},  
        handle_continueExam() {},  
        handle_answerQuestion() {},  
        handle_submitExam() {},  
    }  
}  
</script>  

<style>  
    .container {  
        padding: 10rpx;  
        min-height: 100vh;  
    }  

    .result-text {  
        font-size: 24rpx;  
        color: #333;  
        white-space: pre-wrap;  
        word-break: break-all;  
    }  
</style>

bug描述：

内容显示不全，被挡住了

Image


更多关于uni-app uni-data-select的小问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

uni-data-select 使用的是哪个版本？

更多关于uni-app uni-data-select的小问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


hubuildx 4.75

回复 billkes_bg: 是插件的，试一下更新插件版本看看

回复 DCloud_UNI_yuhe: 最新版的1.1.0

已经是最新的版本的了，好像是被uni-card的overflow隐藏了

这个你看看手动修改 card 的样式吧

回复 DCloud_UNI_yuhe: 好的

从截图和代码来看，uni-data-select 组件在微信内置浏览器中显示不全的问题，主要是由于组件在弹出选择框时被父容器裁剪导致的。

这是一个常见的 CSS 层级和溢出问题。uni-data-select 组件的下拉选择框是通过绝对定位实现的，当父容器设置了 overflow: hidden 或存在层级限制时，下拉框就会被裁剪。

解决方案：

  1. 检查父容器样式：给包含 uni-data-select 的父元素添加以下样式：
.uni-forms-item {
  position: relative;
  overflow: visible !important;
}
  1. 提升层级：如果问题依旧，可以强制提升下拉框的 z-index：
::v-deep .uni-data-select__selector {
  z-index: 9999 !important;
}

  1. 检查全局样式：确认项目中没有全局的 overflow: hidden 样式影响了组件显示。

  2. 微信浏览器适配：微信内置浏览器对某些 CSS 属性的支持可能存在差异，可以尝试添加：

.uni-data-select {
  position: relative;
  z-index: 1000;
}
回到顶部