uniapp自定义picker以及使用
文章描述：
uniapp自定义picker数据以及使用方法
性别
template
<picker :value="index" :range="CustomList" :range-key="'title'" @change="bindPickerChange">
<view class="uni-input">{{CustomList[index].title}}</view>
</picker>
<view @tap="post">获取</view>script
var _self;
export default {
data() {
return {
CustomList: [{title:"男",val:"1"},{ title:"女",val:"2"}],
index: 0,
}
},
onLoad() {
_self = this;
},
methods: {
post(){
console.log(_self.CustomList[_self.index].val)
},
bindPickerChange: function(e) {
// console.log(e)
var index = e.target.value
var storage = _self.CustomList
_self.index = index
},
}
}其他
template
<template>
<view class="page">
<view>地址：</view>
<view>
<picker
:value="index"
:range="storageCustomList"
:range-key="'addressname'"
@change="bindPickerChange($event,storageCustomList)"
>
<view class="uni-input">{{storageCustomList[index].addressname}}</view>
</picker>
</view>
</view>
</template>script
export default {
data() {
return {
storageCustomList: [
{
id:"001",
addressname:"锦江区"
},
{
id:"002",
addressname:"成华区"
},
{
id:"003",
addressname:"武侯区"
}
],
index: 2,
pickerData:''
};
},
methods: {
bindPickerChange: function(e,storage) {
// console.log(e)
// console.log(storage)
this.index = e.target.value; // 坐标
this.pickerData = storage[this.index] // 这里就是选中的对象
},
}
}style
.page{
display: flex;
justify-content: flex-start;
}
发布时间：2021/11/24
发表评论