问题描述:在uni-popup弹窗中使用picker-view,当我打开弹窗时,picker-view会通过自动定位到我传入的默认值。问题就出现在这里。我的模拟数据中一共有三条数据,结果当我滑动选中最后一条数据时,change事件返回的e.detail.value[0]为1,而不是2。同样我打开弹窗时也会出现选中了最后一条数据,但是会自动触发change事件(返回的e.detail.value[0]仍为1)。
代码:
<uni-popup ref="popupSettingPortion" type="bottom" :safe-area="false" class="pop1" @change="onPopupChange">
<view class="popup_portion">
<view class="popup_portion_header">
<view class="popup_portion_header_1"></view>
<view class="popup_portion_title">{{t('MealsSet')}}</view>
<image src="/static/workout/customNameClose.png" mode="" @click="clickCloseDelPortion"></image>
</view>
<picker-view :value="[tempPortionIndex]" @change="handlePortionChange"
indicator-style="height: 80rpx;background: rgba(217,217,217,0.2);">
<picker-view-column>
<view class="picker-item" v-for="(item, index) in portionOptions" :key="index">{{ item }}</view>
</picker-view-column>
</picker-view>
<view class="popup_portion_footer">
<view class="popup_portion_btn" @click="confirmPortion">{{t('passwordSuccess')}}</view>
</view>
</view>
</uni-popup>
const popupSettingPortion = ref(null);
const tempPortionIndex = ref(0);
const portionOptions = ref([
'1个(大)',
'1个(中)',
'1个'
]);
const foodData = ref({
calories: 360,
cabrs: 72,
protein: 9,
fat: 5,
portion: "1个",
number: 1
})
// 唤起弹窗,选择份量
const openPortionPopup = () => {
const currentIndex = portionOptions.value.findIndex(
item => item === foodData.value.portion
);
tempPortionIndex.value = currentIndex >= 0 ? currentIndex : 0;
console.log(tempPortionIndex.value); // 首次打开弹窗时,结果是2
popupSettingPortion.value.open();
};
// 关闭-选择分量
const clickCloseDelPortion = () => {
popupSettingPortion.value.close();
};
// 切换-选择份量
const handlePortionChange = (e) => {
tempPortionIndex.value = e.detail.value[0];
console.log('当前选中下标:', tempPortionIndex.value); // 首次打开弹窗也会触发该函数,然后值为1;当我上下切换被选中项时,值在0和1之间变动,不会变成2,哪怕我选中了最后一条数据
};
// 赋值
const confirmPortion = () => {
foodData.value.portion = portionOptions.value[tempPortionIndex.value];
popupSettingPortion.value.close();
};
1***@qq.com (作者)
4.66版本,我使用ios真机测试,采用的是标准基座
2025-06-25 17:48
1***@qq.com (作者)
展示了3条数据,也可以上下拖动到任意一条数据的位置,但就是当我选中最后一条数据时,不触发change事件,而首次打开弹窗定位默认值时,确实选中了第三条数据,但是change事件此时会触发且结果为1
2025-06-25 17:51
1***@qq.com (作者)
问题已解决,原因是.picker-item在css中设置了具体高度,导致组件判断出现异常,不给它设置height、line-height即可。
2025-06-26 18:07
DCloud_UNI_yuhe
回复 1***@qq.com: 好的,感谢反馈
2025-06-27 11:33