uniapp 微信小程序 uview u-picker和u-action-sheet的层级问题/解决覆盖问题

我的场景:
点击按钮拉起u-action-sheet,此时再点击按钮拉起u-picker,结果发现u-picker在u-action-sheet的下面,被遮盖了。

解决方案:
给他们包裹一层容器,给他们的容器设置定位和层级。

<template style="position: absolute;z-index: 100;" v-if="isShowPageRangeComponent">
	<u-picker ref="uPicker" class="picker-height" :immediateChange="true" :defaultIndex="defaultIndexArr" @change="changeHandler" @confirm="agreePrintRangeHandle" @cancel="isShowPageRangeComponent=false" @close="isShowPageRangeComponent=false" :show="isShowPageRangeComponent" :columns="columns" :closeOnClickOverlay="true"></u-picker>
</template>
<view style="position: absolute;z-index: 10;">
    <u-action-sheet
style="z-index: 10;"
        :closeOnClickOverlay="true"
        :closeOnClickAction="true"
        :showMessageCard="true"
        @close="closePrintParamDlg"
        :actions="list"
        title="配置文件打印参数"
        round="20"
        :show="isShowPrintParamDialog"
    >
        <div class="printParamDialog">
            <view class="form-item" style="display: flex;justify-content:space-between;">
                <view style="white-space:nowrap;padding-right:20rpx;"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uview的u-picker组件可以实现省市区三级联动,使用时需要设置相应的数据源。以下是一个简单的例子: ```html <template> <view> <u-picker :picker-data="pickerData" :default-value="defaultValue" @change="onChange" /> </view> </template> <script> export default { data() { return { pickerData: [], defaultValue: [], }; }, mounted() { // 获取省市区数据 this.getAreaData(); }, methods: { async getAreaData() { // 发送请求获取省市区数据 const res = await this.$http.get('/api/area'); // 处理数据,将数据转换为u-picker可用的格式 this.pickerData = [ { label: '请选择', value: '', children: res.data.map((province) => ({ label: province.name, value: province.id, children: province.cities.map((city) => ({ label: city.name, value: city.id, children: city.areas.map((area) => ({ label: area.name, value: area.id, })), })), })), }, ]; // 设置默认值为当前所在地区 this.setDefaultArea(); }, setDefaultArea() { // 获取当前所在地区,将其设置为默认值 const area = this.$store.state.area; if (area.province && area.city && area.area) { this.defaultValue = [area.province.id, area.city.id, area.area.id]; } }, onChange(value) { // 处理选中的值 console.log(value); }, }, }; </script> ``` 在上面的代码中,我们使用了u-picker组件,并将picker-data设置为一个数组,数组中包含省市区三级数据。defaultValue设置为一个数组,数组中包含当前所在地区的id,这样在渲染u-picker时,就会自动选中对应的省市区。当用户选择省市区时,会触发onChange事件,我们可以在这里处理用户选择的省市区数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值