uni-app uni-data-picker 缝隙很大

示例代码：

{
"name": "uni-app-xiaotuxian",
"version": "0.0.0",
"author": {
"name": "itheima",
"url": "https://web.itheima.com/"
},
"scripts": {
"dev:app": "uni -p app",
"dev:app-android": "uni -p app-android",
"dev:app-ios": "uni -p app-ios",
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:app": "uni build -p app",
"build:app-android": "uni build -p app-android",
"build:app-ios": "uni build -p app-ios",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-weixin": "uni build -p mp-weixin",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
"tsc": "vue-tsc --noEmit --skipLibCheck",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"prepare": "husky install",
"lint-staged": "lint-staged"
},
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-components": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-h5": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-jd": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-mp-xhs": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-ui": "^1.5.2",
"pinia": "2.0.27",
"pinia-plugin-persistedstate": "^3.2.0",
"vue": "^3.2.47",
"vue-i18n": "^9.2.2",
"weixin-js-sdk": "^1.6.5"
},
"devDependencies": {
"@dcloudio/types": "^3.3.3",
"@dcloudio/uni-automator": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3081220230802001",
"@dcloudio/uni-vue-devtools": "3.0.0-alpha-3080220230511001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3081220230802001",
"@rushstack/eslint-patch": "^1.1.4",
"@types/node": "^18.11.9",
"@uni-helper/uni-app-types": "^0.5.8",
"@uni-helper/uni-ui-types": "^0.5.11",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.0",
"@vue/runtime-core": "^3.2.45",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"husky": "^8.0.0",
"lint-staged": "^13.0.3",
"miniprogram-api-typings": "^3.12.0",
"prettier": "^2.7.1",
"sass": "^1.71.1",
"sass-loader": "^10.1.1",
"typescript": "^5.1.6",
"vite": "^4.4.9",
"vue-tsc": "^1.8.8"
}
}

操作步骤：

<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
</uni-card> 
<uni-section title="本地数据" type="line">  
    <view class="uni-px-5 uni-pb-5">  
        <uni-data-picker  
            placeholder="请选择班级"  
            popup-title="请选择"  
            :localdata="classDataTree"  
            v-model="classValue"  
            @change="onchange"  
            @nodeclick="onnodeclick"  
            @popupopened="onpopupopened"  
            @popupclosed="onpopupclosed"  
        ></uni-data-picker>  
    </view>  
</uni-section>  
<uni-section title="自定义插槽" type="line">  
    <view class="uni-px-5 uni-pb-5">  
        <uni-data-picker v-slot:default="{ data, error, options }" title="请选择" :localdata="classDataTree" v-model="classValue">  
            <view class="input-border">  
                <view v-if="error" class="error">  
                    <text>{{ error }}</text>  
                </view>  
                <view v-else-if="data.length" class="input-selected">  
                    <view v-for="(item, index) in data" :key="index" class="selected-item">  
                        <text>{{ item.text }}</text>  
                    </view>  
                </view>  
                <view v-else><text>请选择</text></view>  
            </view>  
        </uni-data-picker>  
    </view>  
</uni-section>  
</view>  
</template>

<script>
export default {
data() {
return {
nation: '汉族',
address: '110101',
classValue: '1-2',
classDataTree: [
{
text: '一年级',
value: '1-0',
children: [
{
text: '1.1班',
value: '1-1'
},
{
text: '1.2班',
value: '1-2'
}
]
},
{
text: '二年级',
value: '2-0',
children: [
{
text: '2.1班',
value: '2-1'
},
{
text: '2.2班',
value: '2-2'
}
]
},
{
text: '三年级',
value: '3-0',
disable: true
}
];
},
methods: {
onnodeclick(e) {
console.log('nodeclick', e);
},
onpopupopened(e) {
console.log('onpopupopened');
},
onpopupclosed(e) {
console.log('onpopupclosed');
},
onchange(e) {
console.log('onchange', e.detail.value);
}
}
};
</script>

<style>
.container {
/* padding: 0 15px; */
/* #ifndef APP-NVUE */
display: flex;
max-width: 500px;
/* #endif */
flex-direction: column;
}
.title {
font-size: 14px;
font-weight: bold;
margin: 20px 0 5px 0;
}
.input-border {
border: 1px solid #b3e5fc;
border-radius: 5px;
padding: 2px 4px;
}
.input-selected {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
line-height: 2;
}
.data-pickerview {
height: 300px;
border: 1px solid #e5e5e5;
border-radius: 5px;
/* #ifndef APP-NVUE */
overflow: hidden;
/* #endif */
}
.uni-scroll-view-content {
/* display: none; */
}
</style>

预期结果：

没有空隙

实际结果：

bug描述：

空隙太多了. 从官方下的示例有没这个问题。。。我这个版本就有。。。

更多关于uni-app uni-data-picker 缝隙很大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

<uni-data-picker ref=“sectionRef” id=“city” class=“city” placeholder=“请选城市” popup-title=“请选择所在地区”
localdata=“dataTree” @popupopened=“onpopupopened” @popupclosed=“onpopupclosed” v-model=“query.city” @change=“onchangeCity” :clear-icon=“false”> </uni-data-picker>

const onpopupopened = (e: any) => { setTimeout(() => { const dom1 = document.getElementsByClassName(‘uni-data-tree-dialog’) const dom2 = dom1[0].getElementsByClassName(‘selected-area’) const dom3 = dom2[0]
// 这里添加了class，当前有效果。但是当npm run dev:h5或build:h5后。这里的class找不到样式
dom3.classList.add(‘test222’)

// 样式会失效、bug找不到原因；所以这里采用动态修改

// @ts-ignore
dom3.style.flex = ‘0 1 auto’
// @ts-ignore
dom3.style.height = ‘auto’
}, 100) }
问题解决了，但是不知道原因。有知道的小伙伴，可以留言一下

更多关于uni-app uni-data-picker 缝隙很大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼

在使用 uni-data-picker 组件时，如果发现组件之间的缝隙很大，可能是由于样式设置不当导致的。以下是一些可能的原因及解决方法：

1. 检查默认样式

uni-data-picker 组件可能有默认的 margin 或 padding，导致组件之间的缝隙较大。你可以通过检查元素的样式来确认是否存在这些问题。

.uni-data-picker {
    margin: 0;
    padding: 0;
}

2. 自定义样式

如果你发现默认样式不符合你的需求，可以通过自定义样式来调整组件的外观。例如：

.uni-data-picker {
    margin: 0;
    padding: 0;
    border: none;
}

.uni-data-picker-item {
    margin: 0;
    padding: 5px; /* 根据需要调整 */
}

3. 使用 `flex` 布局

如果你希望 uni-data-picker 组件内部的元素排列更加紧凑，可以尝试使用 flex 布局：

.uni-data-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

4. 调整行高

有时，行高（line-height）设置过大也会导致元素之间的缝隙变大。你可以尝试调整行高：

.uni-data-picker-item {
    line-height: 1.2; /* 根据需要调整 */
}

5. 检查父容器样式

有时，父容器的样式也会影响子元素的布局。确保父容器的样式没有导致不必要的间距。

.parent-container {
    margin: 0;
    padding: 0;
}

6. 使用 `uni-app` 提供的 `class` 和 `style`

你可以直接在 uni-data-picker 组件上使用 class 或 style 来调整样式：

<uni-data-picker class="custom-picker" style="margin: 0; padding: 0;"></uni-data-picker>