sfms3.0-uniapp/test/pullDownTest.vue

<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="options"></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,
				options: [{
						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>