You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
242 lines
6.9 KiB
242 lines
6.9 KiB
1 year ago
|
<template>
|
||
|
|
<view class="example-body">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- <view class="u-demo-area u-flex u-row-center">
|
||
|
|
<pullDown label="所在城市市111" :active="true" :close-on-click-mask="mask" ref="uDropdown"
|
||
|
|
:activeColor="activeColor" :borderBottom="borderBottom">
|
||
|
|
<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
|
||
|
|
|
||
|
|
</pullDown>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" @confirm="pullDownConfirm"
|
||
|
|
:height="100" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市" @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" @confirm="pullDownConfirm"
|
||
|
|
:height="100" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市" @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" @confirm="pullDownConfirm"
|
||
|
|
:height="100" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市" @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" @confirm="pullDownConfirm"
|
||
|
|
:height="100" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市" @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" @confirm="pullDownConfirm"
|
||
|
|
:height="100" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市" @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" @confirm="pullDownConfirm"
|
||
|
|
:height="100" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市" @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" @confirm="pullDownConfirm"
|
||
|
|
:height="100" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown label="所在城市" @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
|
||
|
|
<pullDown @change="change" v-model="value1" :options="candidates2" :isSearch="true" hint='请搜索'
|
||
|
|
@confirm="pullDownConfirm" />
|
||
|
|
<u-search />
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
index: 1,
|
||
|
|
current: 2,
|
||
|
|
show: false,
|
||
|
|
//初始化数据
|
||
|
|
candidates: ["111", '11'], //可输入下拉框数据
|
||
|
|
//下拉框初始数据
|
||
|
|
examinationTypeArray: ['请选择', '11111', '22222', '33333', '44444'],
|
||
|
|
examinationTypeIndex: 0,
|
||
|
|
examinationTypeArrayType: '请选择',
|
||
|
|
candidates2: ['北京', '南京', '东京', '西京'],
|
||
|
|
city: '北京',
|
||
|
|
city2: '11',
|
||
|
|
// 菜单右侧的icon图标
|
||
|
|
menuIcon: 'arrow-down',
|
||
|
|
activeColor: '#007aff',
|
||
|
|
|
||
|
|
value1: '',
|
||
|
|
value2: '2',
|
||
|
|
mask: true,
|
||
|
|
options1: [{
|
||
|
|
label: '默认排序',
|
||
|
|
value: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '距离优先',
|
||
|
|
value: 2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '价格优先',
|
||
|
|
value: 3,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
options2: [{
|
||
|
|
label: '去冰',
|
||
|
|
value: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '加冰',
|
||
|
|
value: 2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '正常温',
|
||
|
|
value: 3,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '加热',
|
||
|
|
value: 4,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '极寒风暴',
|
||
|
|
value: 5,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
list: [{
|
||
|
|
label: '琪花瑶草',
|
||
|
|
active: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '清词丽句',
|
||
|
|
active: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '宛转蛾眉',
|
||
|
|
active: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '煦色韶光',
|
||
|
|
active: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '鱼沉雁落',
|
||
|
|
active: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '章台杨柳',
|
||
|
|
active: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '霞光万道',
|
||
|
|
active: false,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
borderBottom: false,
|
||
|
|
activeColor: '#2979ff'
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
change(index, item) {
|
||
|
|
this.$u.toast(`点击了第${index}项---${item}`);
|
||
|
|
},
|
||
|
|
|
||
|
|
pullDownConfirm(item) {
|
||
|
|
this.$u.toast(`回车校验---${item}`);
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.uni-combox-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
font-size: 16px;
|
||
|
|
height: 100%;
|
||
|
|
line-height: 100%;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
width: 100%;
|
||
|
|
background-color: mediumaquamarine;
|
||
|
|
}
|
||
|
|
|
||
|
|
.uni-combox-item-text {
|
||
|
|
font-size: 16px;
|
||
|
|
height: 100%;
|
||
|
|
line-height: 100%;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
width: 100%;
|
||
|
|
background-color: mediumaquamarine;
|
||
|
|
padding: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-dropdown__menu__item__arrow--rotate {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
transition-duration: 0.5s;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-dropdown__menu__item__arrow {
|
||
|
|
background-color: aqua;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
transition-duration: 0.5s;
|
||
|
|
}
|
||
|
|
</style>
|