前端小白002: 关于picker-view的初始值value的设置

最新推荐文章于 2025-10-16 09:30:21 发布

原创最新推荐文章于 2025-10-16 09:30:21 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #es6 #html #前端

前端专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了在Vue和小程序中如何正确设置picker-view组件的初始值。在Vue中，通过监听数组变化并使用setTimeout来延迟设置value属性；在小程序中，则直接在onLoad函数中设置value属性。

关于picker-view的初始值value的设置

1、在vue里设置picker-view初始值

picker-view 的初始值需要在元素生成后设置，如果是异步获取数据的，需要监听绑定的数组，等待完成后使用一次性定时器setTimeOut

<picker-view :value="pickerValue">
    <picker-view-column>
        <view v-for="(item,index) in list" :key="index">{{item}}</view>
    </picker-view-column>
</picker-view>

直接使用

data() {
	return {
		pickerValue: [0],
		list: []
	}
},
watch: {
	list(n) {
		// 初始化picker-view数据
		this.initFunc()
		// 设置picker-view初始值value
		let timer = setTimeOut(() => {
			this.pickerValue = [1]
			clearTimeOut(timer)
			timer = null
		}, 0)
	}
},
methods: {
	getPickerList() {
		// 获取数据
		this.list = [1, 2, 3, 4, 5]
	},
	initFunc() {
		// 对初始数据进行修改， 不用直接跳过该阶段
	}
},
created() {
	// 初始化数据
	this.getPickerList()
}

组件传值

props: {
	value: {
		type: Number,
		default: 0
	},
	list: {
		type: Array,
		default: []
	}
},
data() {
	return {
		pickerValue: [0]
	}
},
watch: {
	list(n) {
		// 初始化picker-view数据
		this.initFunc()
		// 设置picker-view初始值value
		let timer = setTimeOut(() => {
			this.pickerValue = [this.$props.value]
			clearTimeOut(timer)
			timer = null
		}, 0)
	}
},
methods: {
	initFunc(){
		// 对初始数据进行修改， 不用直接跳过该阶段
	}
}

2、在小程序上设置picker-view初始值

<picker-view value="{{value}}">
    <picker-view-column>
      <view wx:for="{{list}}" wx:key="index">{{item}}</view>
    </picker-view-column>
  </picker-view>

javascript

data: {
	list: [],
	value: [0]
},
onLoad() {
	this.setData({
		// 除开设置初始值的数据，包括绑定在picker-view的数组list
	})

	this.setData({
		// 设置picker-view初始值的
		value: [1]
	})
}