7***@qq.com
7***@qq.com
  • 发布:2022-10-24 21:40
  • 更新:2022-10-25 20:18
  • 阅读:282

【报Bug】nuve页面使用uni-data-select不能正常显示

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.7

手机系统: 全部

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

小米10手机,安卓5.1的安卓板

示例代码:
<template>  
  <view>  
    <uni-card is-full>  
      <text class="uni-h6"  
        >通过数据驱动的单选框和复选框,可直接通过连接 uniCloud  
        获取数据,同时可以配合表单组件 uni-forms 使用</text  
      >  
    </uni-card>  
    <uni-section title="本地数据" type="line">  
      <uni-data-select  
        v-model="value"  
        :localdata="range"  
        @change="change"  
      ></uni-data-select>  
    </uni-section>  
    <uni-section  
      title="云端数据"  
      subTitle="连接云服务空间, 且存在相关的数据表才能生效(此处演示, 未连接云服务空间, 故不生效, 且有报错)"  
      type="line"  
    >  
      <uni-data-select  
        collection="opendb-app-list"  
        field="appid as value, name as text"  
        v-mode="value"  
      />  
    </uni-section>  
    <uni-section title="是否可清除已选项" type="line">  
      <uni-data-select  
        v-model="value"  
        :localdata="range"  
        @change="change"  
        :clear="false"  
      ></uni-data-select>  
    </uni-section>  
    <uni-section title="配置左侧标题" type="line">  
      <uni-data-select  
        v-model="value"  
        :localdata="range"  
        @change="change"  
        label="应用选择"  
      ></uni-data-select>  
    </uni-section>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        value: 0,  
        range: [  
          { value: 0, text: "篮球" },  
          { value: 1, text: "足球" },  
          { value: 2, text: "游泳" },  
        ],  
      };  
    },  
    methods: {  
      change(e) {  
        console.log("e:", e);  
      },  
    },  
  };  
</script>  

<style lang="scss">  
  .text {  
    font-size: 12px;  
    color: #666;  
    margin-top: 5px;  
  }  

  .uni-px-5 {  
    padding-left: 10px;  
    padding-right: 10px;  
  }  

  .uni-pb-5 {  
    padding-bottom: 10px;  
  }  
</style>  

操作步骤:

下载uni-data-select示例项目,改首页文件格式为.nvue
在 manifest.json > app-plus 节点下配置 "nvueStyleCompiler" : "uni-app"

预期结果:

下拉框可以正常使用

实际结果:

下拉框异常,点击后显示效果错误,且不能点击选项

bug描述:

uni-data-select不能在nuve页面正常使用

2022-10-24 21:40 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

不支持nvue

该问题目前已经被锁定, 无法添加新回复