uniapp中使用微信组件picker-view个人经验总结

最新推荐文章于 2025-10-09 09:27:41 发布

原创最新推荐文章于 2025-10-09 09:27:41 发布 · 5.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #ui #小程序 #vue.js

博主分享了在uniapp微信小程序中遇到的问题，从 vant 的 picker 组件转向微信原生 picker-view，解决遮罩层、高度调整、标题样式和级联数据同步等问题，详述了改造过程和关键代码片段。

博主最近在使用uniapp做一个微信小程序，要使用到picker UI组件，原先是使用vant的，但由于在created组件的时候使用云函数异步获取picker内的数据，最终导致展示不了，真的无语，如果是使用本地数据就没问题，于是就去找其他UI，用了很多，各种问题，最终使用了微信原生的组件，可能很多人要问我为什么不使用picker而要用picker-view，是因为。。picker的字体太小了，这微信，上网查也说改不了，于是只能用picker-view，下面进入正文

picker-view的遮罩层

这个真的无语。。，居然没有，于是只能自己做一个，也不是很难，加入一个view(div)，设置display：fixed脱离文档流，高度宽度全屏，透明度和背景颜色设置起来，再加上v-show和相关的事件：点击遮罩层后可以隐藏picker-view

<view class="staorder-overlay" v-show="isSelectTime" @click="changeIsSelect"></view>

//css

.staorder-overlay{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 13;
		top: 0;
		left: 0;
		background-color: #989898;
		opacity:0.5;
	}

2.picker-view的展示

这个也是，一言难尽，要设置对应的高度宽度才能展示出来，然后text-align将picker-view-column居中展示

<picker-view v-if="isSelectTime" class="staorder-pickview" @change="changeSelectTime">
			
	<picker-view-column class="staorder-pickcolumn">
		<view class="staorder-pickcolumn" v-for="(item,index) in timeGroup[0].values" 
         :key="index">{{item}}年</view>
	</picker-view-column>
			
    <picker-view-column class="staorder-pickcolumn">
	    <view class="staorder-pickcolumn" v-for="(item,index) in timeGroup[1].values" 
         :key="index">{{item}}月</view>
    </picker-view-column>
				
</picker-view>


.staorder-pickview{
		width: 100vw;
		height: 35vh;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		z-index: 100;
		text-align: center;
	}

3.picker-view中的标题

这个。。，微信的产品经理出来挨打，picker-view中的元素貌似只能以列来展示。。

没办法，只能还是像前面遮罩层那样子，position大法

<view v-show="isSelectTime" class="staorder-picktitle">选择时间</view>

.staorder-picktitle{
		/* width: 100vw;
		height: 69rpx;
		padding: 35rpx;
		text-align: center; */
		position: fixed;
		bottom: 30vh;
		left: 41vw;
		right: 41vw;
		color: black !important;
		z-index: 119 !important;
	}

注释中的内容是我失败的尝试，哈哈哈哈哈哈我裂了

4.监听picker-view内的变化

这个好像。。，它原生api中的bindchange，不起作用，无论是：还是@还是原生，都不行！！

所以，直接@change，会返回一个事件对象，里面的detail.value就是数据的索引，也就是bindchange中返回的内容，具体去看他的文档

<picker-view v-if="isSelectTime" class="staorder-pickview" @change="changeSelectTime">

changeSelectTime(e) {
	console.log(e.target.value)
	let i=e.target.value[0]
	if(i!=this.nowYearIndex){
		this.nowYearIndex=i
		this.timeGroup[1].values=this.timeTotal[this.timeGroup[0].values[i]]
		console.log(this.timeGroup)
	}
	let j=e.target.value[1]
	this.staTime = this.timeGroup[0].values[i] + '年' + this.timeGroup[1].values[j] + '月'
	console.log(this.staTime)
				// if (this.staTime == '') {
				// 	this.staTime = this.timeGroup[0]
				// }
				// this.isSelectTime = !this.isSelectTime
	},

5.级联picker-view中的数据

在data中设置一个变量记录值，手动监听。。，然后修改下一列的值，如上事件中if中的内容

真的大无语，手动把一个啥也没的picker-view变成封装好的picker组件