uniapp使用picker

前言

一、uniapp简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uniapp官网

二、picker简介

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

三、使用

1.实现效果图

2.代码如下

代码如下（示例）：

<template>
	<view class="addProject">
		<uni-card style="padding: 0;">
			<view class="industryDirection">
				<view class="uni-list">
					<view class="uni-list-cell">
							<view class="uni-list-cell-left">产业方向</view>
							<view class="uni-list-cell-db">
								<picker @change="bindIndustryDirectionPickerChange" :value="industryIndex" :range="industryDirectionArrayId" :range-key="'text'">
									<view class="picker">
										{{industryIndex>0 ? industryDirectionArrayId[industryIndex].text : industryIndex==0 ? industryDirectionArrayId[0].text :'请选择产业方向'}}
									</view>
								</picker>
							</view>
					</view>
				</view>
				<image class="updown" src="../../static/img/index_more.png"></image>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import { get_industryDirection } from '../../../utils/api.js'
	export default {
	    data() {
				return {
					title: 'picker',
					//产业方向
					industryDirectionArrayId: [],
					industryIndex:-1,
				}
	    },
			onLoad(option) {
				this.sysOrgCode = uni.getStorageSync("sysOrgCode");
				this.type = option.type;
				this.getGradeList();
			},
	    methods: {
				//获取下拉框的值
				getGradeList(){
					//产业方向
					get_industryDirection().then((res) => {
						this.industryDirectionArrayId = res.data.result;
					})
				},
				bindIndustryDirectionPickerChange:function(e) {	
					this.industryIndex = e.detail.value
					this.industryDirection = this.industryDirectionArrayId[e.detail.value].value
				},
				
	    }
	}
</script>

<style>
	page{
		background-color: #F7F8FA;
	}
</style>
<style lang="scss">
	.addProject{
		min-height: 900upx;
		.uni-card{
			background-color: #fff;
			font-size: 27upx;
			.industryDirection{
				width: 623upx;
				height: 90upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// border-bottom: 1upx solid #C0C0C0;
				.uni-list-cell{
					display: flex;
					.uni-list-cell-left{
						margin-right: 51upx;
					}
					.isOp{
            opacity: 0;
					}
					.place{
						color: #C7C7C7;
						font-size: 27upx;
					}
				}
				.updown{
					width: 11upx;
					height: 20upx;
				}
			}
		}
		.addBtn{
			width: 90%;
			background-color: #377AFF;
			margin-bottom: 20upx;
		}
	}
</style>
<style scoped>
	/deep/.uni-border[data-v-19622063]:after{
		border: 0;
	}
	/deep/.uni-textarea-textarea{
		width: 455upx;
		height: 91upx;
		border-radius: 9upx;
		font-size: 27upx;
	}
</style>

总结

该文章实现了二维数组实现picker的显示