uni-app内置组件picker-view和uni-popup的使用注意事项

picker-view使用

1.picker-view比picker使用更加灵活。以下是picker-view结合uni-popup的使用场景（单列，多列）。

 2.使用方式：

参考说明：uni-app的官方文档   picker-view | uni-app官网

单列使用

<uni-popup ref="noTimeselectDialog" type="dialog"  class="selectDialogBox" :maskClick="false" :isMaskClick="false" :close='NOTIMEcloseUnit'>
	<view  class="selectBox">
		<view class="selectTitle">
			<text class="cancel" @click='NOTIMEcloseUnit'>取消</text>
			<text class="title">{{'选择'+popupTitle}}</text>
			<text class="ok cancel" @click="onClickConfirmUnitNOtime">确定</text>
		</view>
		<picker-view :indicator-style="indicatorStyle" :value="values" @pickstart="pickstart" @pickend="pickend" @change="bindChange" :immediate-change='true' class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item, index) in unitList" :key="index">{{item.name}}</view>
			</picker-view-column>
		</picker-view>
</uni-popup>

  在使用bindChange方法时会有延迟，可以加上immediate-change=‘true’立即执行

export default {
		data() {
			return {
				unitList:[{id:1,name:'小学'},{id:2,name:'初中'},{id:3,name:'高中'},{id:4,name:'中专'}]，
				values：[],//这个是数组
			}
		},
		methods:{
			bindChange(e){
				const val = e.detail.value; //可以得到选择中的下标(map数组)
				this.values=val //如果是单列会得到[0:1],0是单列的下标，1是选择的id
				let id=this.unitList[val[0]].id
				let name=this.unitList[val[0]].name
			
			},
		}
}

this.values=val可以避免组件在滑动使用时会跳到第一个

多列使用

<uni-popup ref="TFselectDialog" type="dialog"  class="selectDialogBox" :maskClick="false" :isMaskClick="false" :close='TFcloseUnit'>
	<view  class="selectBox">
		<view class="selectTitle">
			<text class="cancel" @click='TFcloseUnit'>取消</text>
			<text class="title">{{'选择'+popupTitle}}</text>
			<text class="ok cancel" @click="onClickConfirmUnitTF">确定</text>
		</view>
		<picker-view v-if="popupID=='birthday'" :immediate-change='true' :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					   <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					    <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				 </picker-view-column>
				 <picker-view-column>
					     <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
		 </picker-view>
									
	</view>
</uni-popup>

//参考来自uni-app的picker-view   
export default {
        data: function () {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()
            for (let i = 1990; i <= date.getFullYear(); i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
                title: 'picker-view',
                years,
                year,
                months,
                month,
                days,
                day,
                value: [9999, month - 1, day - 1],
                visible: true,
                indicatorStyle: `height: 50px;`
            }
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
            }
        }
    }

左边的是每列的下标，右边的数字是每列里面的选中的下标。

3.注意事项

1.uni-popup在苹果的某些机型（iPhone X/XR/12/13中）显示里面可以会出现底部往上移。漏出下面的内容。

例图：

解决方法：（来源@走出半生的少年）

 

 

 

2.UNI-popup的输入框点击取消后再次打开有历史数据遗留问题。

<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" :value="ppp"  placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
</uni-popup>

实例：

 可能会出现点击取消时，输入框的内容没有清空等情况时。可以通过找到这个输入框的实例里的 val设置为"空"。

this.$refs.inputClose.val=''