注册 登录
2***@qq.com
2***@qq.com
  • 发布：2024-05-13 13:47
  • 更新：2024-05-13 17:15
  • 阅读：189

【报Bug】uni-data-picker 缝隙很大

分类：uni-app

产品分类： uniapp/H5

PC开发环境操作系统： Windows

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

浏览器平台： Chrome

浏览器版本： Chrome

项目创建方式： CLI

CLI版本号： "vue": "^3.2.47"

示例代码：

{
"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 class="title">  
  <text>Cloud 数据 (单例)</text>  
</view>  
<uni-data-picker v-model="nation" collection="opendb-nation-china" field="name as value, name as text"  
  @nodeclick="onnodeclick" @change="onchange" @popupopened="onpopupopened" @popupclosed="onpopupclosed">  
</uni-data-picker>  

<view class="title">  
  <text>Cloud 数据 (树形)</text>  
</view>  
<uni-data-picker placeholder="请选择地址" popup-title="请选择所在地区" :preload="true" :step-searh="true" self-field="code"  
  parent-field="parent_code" collection="opendb-city-china" orderby="value asc"  
  field="code as value, name as text, eq(type, 2) as isleaf" v-model="address" @nodeclick="onnodeclick"  
  @change="onchange" @popupopened="onpopupopened" @popupclosed="onpopupclosed">  
</uni-data-picker>  

<view class="title">  
  <text>uni-data-pickerview</text>  
</view>  
<uni-data-pickerview class="data-pickerview" :preload="true" :step-searh="true" self-field="code"  
  parent-field="parent_code" collection="opendb-city-china" orderby="value asc" field="code as value, name as text">  
</uni-data-pickerview> -->  
</view>

</template>

<script>
export default {
data() {
return {
nation: '汉族',
address: '110101',
// map: {
// text: "label",
// value: "value"
// },
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描述：

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

2024-05-13 13:47 负责人:无 分享

没有找到相关结果

    已邀请:
    2***@qq.com

    2***@qq.com (作者)

    <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>

    <style lang="scss">
    .test222 {
    flex: 0 1 auto !important;
    height: auto !important;
    }
    </style>

    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)
    }

    问题解决了，但是不知道原因。 有知道的小伙伴，可以留言一下

    2024-05-13 17:15 分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报