2***@qq.com
2***@qq.com
  • 发布:2025-08-05 14:46
  • 更新:2025-08-06 11:50
  • 阅读:84

关于uni-data-picker在h5段可以正常显示,但在小程序端无法正常显示

分类:uni-app

这是uniapp vue3页面中的uni-data-picker组件设置代码
<uni-data-picker class="picker" popup-title="请选择所在地区" :localdata="pca" v-model=firstSpot.county
@change="onFinishPicker" :cityHeight="cityHeight">
<view class="" style="display: flex;flex-direction: row;">
<text class="position-input">{{fieldValue}}</text>
<view style="height: 100rpx;line-height: 100rpx;">
<uni-icons type="bottom" color="#ffffff" />
</view>
</view>
</uni-data-picker>

但打包成微信小程序后会变成以下代码

<uni-data-picker wx:if="{{aL}}" u-s="{{['d']}}" class="picker data-v-1dbd5ede" bindchange="{{aJ}}" u-i="1dbd5ede-5" bind:l="l" bindupdateModelValue="{{aK}}" u-p="{{aL}}"><view class=" data-v-1dbd5ede" style="display:flex;flex-direction:row"><text class="position-input data-v-1dbd5ede">{{aH}}</text><view class="data-v-1dbd5ede" style="height:100rpx;line-height:100rpx"><uni-icons wx:if="{{aI}}" class="data-v-1dbd5ede" u-i="1dbd5ede-6,1dbd5ede-5" bind:l="l" u-p="{{aI}}"/></view></view></uni-data-picker>

会多一个wx:if="{{aI}}",然后页面也不会显示这个组件

2025-08-05 14:46 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

我使用4.76 alpha版本的hx测试了如下代码是可以运行在微信小程序的

<template>  
  <view>  
    <uni-data-picker v-model="data" :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        data: undefined,  
        items: [{  
          text: "一年级",  
          value: "1-0",  
          children: [  
            {  
              text: "1.1班",  
              value: "1-1"  
            },  
            {  
              text: "1.2班",  
              value: "1-2"  
            }  
          ]  
        },  
        {  
          text: "二年级",  
          value: "2-0"  
        },  
        {  
          text: "三年级",  
          value: "3-0"  
        }]  
      }  
    },  
    methods: {  
      onchange(e) {  
        const value = e.detail.value  
        console.log(value, 'value')  
      },  
      onnodeclick(node) {  
      }  
    }  
  }  
</script>  
  • 2***@qq.com (作者)

    单独设置uni-data-picker组件没问题,但在这个组件中添加了<view class="" style="display: flex;flex-direction: row;">

    <text class="position-input">{{fieldValue}}</text>

    <view style="height: 100rpx;line-height: 100rpx;">

    这些会导致在小程序端无法显示,只有全部去掉才能使用

    2025-08-06 11:30

DCloud_UNI_JBB

DCloud_UNI_JBB

里面有内容也可以的,你代码写的有问题吧

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

    相同的代码我试了一下,还是有这个问题,只要组件里面加了代码就不显示了,可能是配置问题吧,谢谢大佬

    2025-08-06 14:22

要回复问题请先登录注册