uniapp使用picker
uniapp使用picker前言一、uniapp简介二、picker简介三、使用1.实现效果图2.代码如下总结前言一、uniapp简介uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。uniapp官网二、picker简介从底部弹起的滚
·
uniapp使用picker
前言
一、uniapp简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
二、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的显示
更多推荐
已为社区贡献2条内容
所有评论(0)