一、要求： 小程序原生的picker组件，无法满足自定义样式。所以单独封装了组件，仅限于单项选择的情况
二、效果截图
文章来源：https://www.toymoban.com/news/detail-735021.html
三、代码文章来源地址https://www.toymoban.com/news/detail-735021.html
- html
<template>
<view class="base_picker">
<view class="show_view" @click="showHandle">{{ selectedName.label || selectedName }}</view>
<uni-popup ref="popup" type="bottom" :safeArea="false" :maskClick="true">
<view class="popup_container" :style="{borderRadius: `${radius} ${radius} 0 0`}">
<view class="popup_head">
<text class="btn cancel_btn" @click="$refs.popup.close()">{{ cancalText }}</text>
<text class="title">{{ title }}</text>
<text class="btn confirm_btn" @click="comfirmHandle" :style="comfirmSty">{{ comfirmText }}</text>
</view>
<picker-view v-if="listData && listData.length" class="picker_view" :value="pickerValue" :immediate-change="true" @change="changeHandle">
<picker-view-column >
<view class="item" v-for="(item,index) in listData" :key="index">{{ item.label || item }}</view>
</picker-view-column>
</picker-view>
<view class="empty_view" v-else>{{ emptyDesc }}</view>
</view>
</uni-popup>
</view>
</template>
- js
export default{
props:{
listData: {
type: Array,
default: ()=>[]
},
// 选中的下标
pickerIndex: {
type: [ Number, String ],
default: ''
},
emptyDesc:{
type: String,
default: '暂无数据'
},
title: {
type: String,
default: '标题'
},
comfirmText:{
type: String,
default: '确定'
},
cancalText:{
type: String,
default: '取消'
},
comfirmSty: {
type: Object,
default: ()=>{}
},
//是否显示选择弹窗
disable:{
tyep: Boolean,
default: false
},
radius:{
type: String,
default: '40rpx'
}
},
data() {
return{
pickerValue: [], //下标
index: '',
}
},
watch: {
pickerIndex: {
immediate: true,
handler(e) {
this.index = e;
}
}
},
computed:{
selectedName(){
let val = '';
let { listData, index } = this;
if(listData && listData.length){
val = listData.filter((e,i) => i === index)[0]
}
return val
}
},
methods: {
showHandle(){
if(this.disable) return
this.$refs.popup.open()
},
changeHandle(e) {
const val = e.detail.value
this.getVal = val
},
comfirmHandle() {
let choosedIndex =''
if(this.getVal && this.getVal.length){
this.pickerValue = this.getVal
choosedIndex = this.index = this.getVal[0]
} else {
choosedIndex = this.pickerIndex
}
this.$refs.popup.close()
// 返回选中的下标
this.$emit('comfirmHandle',choosedIndex)
}
}
}
- css样式
<style lang="scss" scoped>
.base_picker{
width: 100%;
.show_view{
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #eee;
}
.popup_container{
background-color: #FFF;
.popup_head{
display: flex;
justify-content: space-between;
align-items: center;
.btn{
padding: 28rpx 32rpx;
&.cancel_btn{
color: #969799;
}
&.confirm_btn{
color: #576B95
}
}
.title{
padding: 28rpx 0;
flex: 1;
font-weight: 500;
color: #323233;
text-align: center;
}
}
.picker_view{
height: 520rpx;
.item{
display: flex;
justify-content: center;
align-items: center;
}
}
.empty_view{
height: 520rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>
到了这里，关于uniapp-微信小程序自定义picker选择器（仅限单项选择）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
