picker-view 小程序端value值不生效

最新推荐文章于 2024-02-23 11:33:32 发布

祁码能跑吧

最新推荐文章于 2024-02-23 11:33:32 发布

阅读量998

点赞数

分类专栏：前端文章标签： javascript 前端 uni-app

本文链接：https://blog.csdn.net/qq_61474921/article/details/131614248

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

修改成功后代码：日期选择组件

解决方法：在data(){return{ }} 之前把所需要数据准备好

<template>
	<picker-view :value="datepick.value" @change="bindChange" :indicator-style="datepick.indicatorStyle" class="picker-view">
	    <picker-view-column>
	        <view class="item" v-for="(item,index) in datepick.years" :key="index">
				{{item}}年
			</view>
	    </picker-view-column>
	    <picker-view-column>
	        <view class="item" v-for="(item,index) in datepick.months" :key="index">
				{{item}}月
			</view>
	    </picker-view-column>
	    <picker-view-column>
	        <view class="item" v-for="(item,index) in datepick.days" :key="index">
				{{item}}日
			</view>
	    </picker-view-column>
	</picker-view>
</template>

<script>
	var datepick={
		years:[],
		months:[],
		days:[],
		value:[0,0,0],
		indicatorStyle:`height:50px`
	}
	let date = new Date()
	let year= date.getFullYear()
	let month =date.getMonth()
	let day = date.getDate()
	for (let i = 1978; i <= year+10; i++) {
	    datepick.years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
	    datepick.months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
	    datepick.days.push(i)
	}
	datepick.value=[(year- 1978), month, day]
	console.log(datepick.value);
	export default {
		name:"pickedate",
		data() {
			return {
				bridate:'',
				datepick:datepick,
			};
		},
		mounted() {
			this.initDate()
		},
		methods:{
			// 单列选择
			bindChange(e){
				let val = e.detail.value
				this.bridate=this.datepick.years[val[0]]+"-"+this.datepick.months[val[1]]+"-"+this.datepick.days[val[2]]+''
				this.$emit('confirm', this.bridate)
			},
			initDate(){
				
			},
		}
	}
</script>

<style scoped lang="scss">
.picker-view {
	height: 600rpx;
	margin-top: 20rpx;
	background-color: #fff;
	.item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}
</style>

网上找了一些没认真看有兴趣自己去看吧

(53条消息) 微信小程序 picker-view 的value不起作用_叶子兔的博客-CSDN博客