1***@qq.com
1***@qq.com
  • 发布:2021-01-26 11:32
  • 更新:2021-01-26 17:51
  • 阅读:960

picker选择器在h5样式错乱问题

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 谷歌浏览器 版本 86.0.4240.111(正式版本)

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

浏览器平台: 微信内置浏览器

浏览器版本: 企业微信h5

项目创建方式: HBuilderX

示例代码:

<template>
<view>
<view class="uni-list">
hahah1
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<picker class="picker" @change="bindPickerChange" :value="index" :range="clientType">
<view class="uni-input">{{clientType[index]}}</view>
</picker>
</view>
</view>
</view>

    <view class="section">  
        <view class="section__title">普通选择器</view>  
        <picker @change="bindPickerChange" :value="index" :range="clientType">  
            <view class="pickerhaha">  
                当前选择:{{clientType[index]}}  
            </view>  
        </picker>  
    </view>  

</view>  

</template>

<script>
import empty from "../../components/empty.vue";
export default {
components: {
empty,
},
data() {
return {
index: 0,
clientType: ['全新客户', '回收客户', '全部'],
}
},
methods: {
bindPickerChange(e) {
let {
value
} = e.detail
this.index = value
console.log(e, 'e')
}
}
}
</script>

<style lang="scss" scoped>
.picker {
position: fixed;
bottom: 0rpx;
}
.uni-mask {
z-index: 900 !important;
}

.uni-picker-container .uni-picker {  
    z-index: 1000 !important;  
}  

</style>

操作步骤:

在企业微信h5里面打开 picker选择器出现问题

预期结果:

在企业微信h5里面打开 picker选择器出现问题

实际结果:

在企业微信h5里面打开 picker选择器出现问题

bug描述:

picker选择器在h5上面出现样式错乱问题,选择器居顶部,下面遮罩层比选择器的层级还高,加了一些css样式还是没有效果,开发时在浏览器上面是正常的 但是放到线上就有问题了

2021-01-26 11:32 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

用示例代码hello uni-app能出现你的问题吗?
不能的话你需要排查出来具体你哪个页面,甚至哪一行导致的。
找出来具体原因后提供一个能复现你描述的bug的最小化demo,让我们及时定位问题,及时修复。
当然如果你按照正确的排错步骤,也许发现是你自己的问题,然后解决问题,而不是框架的问题。框架不可能会有超级明显的问题。

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

    谢谢,是因为HbuilderX版本太低了导致的,更新了一下HbuilderX,然后重新编译上传就好了

    2021-02-26 18:29

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