点击某个区域调用小程序picker；picker调用不灵敏；边角区域调用picker失败；点击不到picker

朱雀 2023-01-16 06:52 190阅读 0赞

# 问题描述 #

当我点击全部这个按钮的时候，要显示picker  
![在这里插入图片描述][20210424193829883.png]  
当picker展开的时候，全部按钮状态如下图  
![在这里插入图片描述][20210424193930659.png]  
功能是实现了，但是`只有点击全部文字和他旁边的图标的时候，才会显示picker，甚至有时候点击图标，picker也不显示`

`showDiQu`值用来控制图标以及样式的切换

<picker class="aaa" @click="diQu()" @change="handleGetRegion" :value="index" :range="province" @cancel="regionCancel()">
    	<view v-if="showDiQu" class="select-right-active">
    		{
       { province[index] }}
    		<u-icon name="arrow-up" color="#2979ff" size="28"></u-icon>
    	</view>
    	
    	<view v-else class="select-right-default">
    		{
       { province[index] }}
    		<u-icon name="arrow-down" color="#c0c4cc" size="28"></u-icon>
    	</view>
    </picker>

handleGetRegion函数如下

handleGetRegion(e) { 
    	//打开地区的pick
    	this.showDiQu = false;
    	console.log(e);
    	this.index = e.detail.value;
    	console.log('picker发送选择改变，携带值为', e.detail.value);
    },

# 解决 #

在picker里面的

<view v-else class="select-right-default">
    	{ {  province[index] }}
    	<u-icon name="arrow-down" color="#c0c4cc" size="28"></u-icon>
    </view>

部分区域太小了，没有撑起他应有的空间，导致点击的时候不灵（没有调用起picker,或者说没有点击到picker）

`给.select-right-default类加大即可`，

[20210424193829883.png]: /images/20221022/6c0588c2c7664051a103a5d447af629f.png
[20210424193930659.png]: /images/20221022/df23cdd32fe5409e97d957e884a9404e.png