前言

一、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.valuethis.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的显示

uniapp使用picker相关推荐

关于uni-app的Picker选择器默认选择的问题
在使用uni-app的Picker选择器时,有时选择器的默认选择是后台传递的参数进行决定,或者是上一个界面传递过来的参数进行默认展示,我们该怎么解决呢? 我这里展示上一个界面传递参数改变picker的 ...
uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
uniapp的picker日期转时间戳多8小时问题
问题: uniapp的picker组件前段时间用的时候发现一个很神奇的问题,就是选择后生成的时间戳会多出8小时解决办法: 经过分析发现,主要是因为生成的时间的格式是以"-"隔开的 ...
uniapp中picker及默认组件改国际化
因为是二开uniapp的项目,我不想去封装组件,去一个一个修改直接进入主题:(目前发现这种方法在h5.app端有效,微信小程序好像是根据系统默认语言,暂时没发现怎么修改,有人知道请告诉我,谢谢!!) ...
uni-app中picker组件的“取消”“完成”国际化，能变成英文
1. uni-appd的picker组件网址:https://uniapp.dcloud.net.cn/component/picker.html#%E6%99%AE%E9%80%9A%E9%80% ...
uni-app使用picker底部弹起的滚动选择器（日期选择器）
picker从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. html部分: <view cl ...
uniapp——基于picker实现年月日时分秒选择器
demo地址:年月日时分秒选择器需求想通过时间筛选的方式,查看对应时间短的数据.为了更精准的比对,因此需要时间确切到秒的筛选. 涉及的技术点 uniapp类型为mode = multiSelect ...
uni-app使用picker的多种选择器（多列，时间，地区）
picker底部滚动选择器 <template><view><view><picker :range="years" @change=&q ...
【uni-app】picker普通选择器的用法
点击前: 点击后: <view class="item"><view class="title">选择学员</view>&l ...

uniapp使用picker