- 发布:2024-05-30 09:55
- 更新:2024-05-30 10:44
- 阅读:381
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Win11和MacOS最新版
HBuilderX类型: 正式
HBuilderX版本号: 4.15
手机系统: 全部
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view>
<uni-popup ref="popupView" type="bottom">
<view class="popup-view">
<picker-view indicator-style="height: 68rpx;" @change="bindChange" class="picker-view">
<picker-view-column>
<view class="item" v-for="(item,index) in list" :key="index">{{item.text}}</view>
</picker-view-column>
</picker-view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { getCurrentInstance, ref } from 'vue';
const list = ref([{ text: '男', value: 1 }, { text: '女', value: 2 }]);
const { proxy } = getCurrentInstance();
defineExpose({ open });
function open() {
proxy.$refs.popupView.open();
}
function bindChange(e) {
console.log(e.detail.value);
}
</script>
<style lang="scss" scoped>
.popup-view {
background-color: #FFFFFF;
.popup-view-header {
text-align: center;
width: 100%;
height: 90rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #F5F5F5;
view {
max-width: 50%;
height: 100%;
box-sizing: border-box;
padding: 0 28rpx;
font-size: 30rpx;
line-height: 90rpx;
&:first-child {
color: #888888;
}
&:last-child {
color: #007aff;
}
}
}
.picker-view {
width: 100%;
height: 476rpx;
margin-top: 20rpx;
.item {
height: 68rpx !important;
line-height: 68rpx;
text-align: center;
color: #000;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
}
}
</style>
<template>
<view>
<uni-popup ref="popupView" type="bottom">
<view class="popup-view">
<picker-view indicator-style="height: 68rpx;" @change="bindChange" class="picker-view">
<picker-view-column>
<view class="item" v-for="(item,index) in list" :key="index">{{item.text}}</view>
</picker-view-column>
</picker-view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { getCurrentInstance, ref } from 'vue';
const list = ref([{ text: '男', value: 1 }, { text: '女', value: 2 }]);
const { proxy } = getCurrentInstance();
defineExpose({ open });
function open() {
proxy.$refs.popupView.open();
}
function bindChange(e) {
console.log(e.detail.value);
}
</script>
<style lang="scss" scoped>
.popup-view {
background-color: #FFFFFF;
.popup-view-header {
text-align: center;
width: 100%;
height: 90rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #F5F5F5;
view {
max-width: 50%;
height: 100%;
box-sizing: border-box;
padding: 0 28rpx;
font-size: 30rpx;
line-height: 90rpx;
&:first-child {
color: #888888;
}
&:last-child {
color: #007aff;
}
}
}
.picker-view {
width: 100%;
height: 476rpx;
margin-top: 20rpx;
.item {
height: 68rpx !important;
line-height: 68rpx;
text-align: center;
color: #000;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
}
}
</style>
操作步骤:
如上
如上
预期结果:
APP端 uni-popup里的picker-view @change事件可以触发
APP端 uni-popup里的picker-view @change事件可以触发
实际结果:
无法实现
无法实现
bug描述:
如题:uni-popup里的picker-view @change事件无法触发。(微信小程序同样的代码就可以)
引子:需求是单击按钮显示从底部弹出的选择器-选择性别。想着很简单,但是...
本来想在官网找一个组件实现单机按钮显示从底部弹出的选择器如picker组件,但是picker是要在页面占位显示的,其它扩展合适需求没有,(这种常见的组件不知道官方为啥没有..)
然后自己想着做个组件,其实思路就是uni-popup+picker-view,最好后,微信小程开发工具测试没有问题,但是再使用手机APP真机测试就出现题目的问题。
废话不说,上组件代码
守护 (作者)
谢谢,我的就是在弹出选择选择器后,手动滑动选择男女时,不触发@change,单击男女列表页没有任何反应,不知道为什么,我再看看
2024-05-30 11:12