精华内容
下载资源
问答
  • uniapp下拉框
    千次阅读
    2021-06-01 10:42:25

    下面的label-key=是下来框显示的内容,value-key是传到后台的key

    <view class="vid2_1">视频</view>
    			<ld-select class="vid2_2" :list="list"
    			            label-key="waterWorkName" value-key="url"
    						v-model="select"
    			            placeholder="请选择" clearable
    			            @change="CHANGE"></ld-select>
    		</view>
    
    import ldSelect from '@/components/ld-select/ld-select.vue'
    	export default {
    		components: {ldSelect},
    		data() {
    			return {
    				select:'',
    				list: [{
    				    url: "1",
    				    waterWorkName: '黄金糕'
    				}] ,
    				url: ''
                }
    		},
    
    CHANGE(val){
                    this.select = val
    				this.url=this.select
                },
    
    更多相关内容
  • uniapp下拉框点击查询数据

    千次阅读 2021-04-30 14:31:51
    先导入插件下拉框多选单选 返回按钮下载地址阿里巴巴矢量图 下面的range-key="stationName"里的stationName是下拉框显示的内容 <view id="data"> <view class="up"> <span class="title">...

    在这里插入图片描述

    先导入插件下拉框多选单选
    返回按钮下载地址阿里巴巴矢量图
    下面的range-key="stationName"里的stationName是下拉框显示的内容

    <view id="data">
    		<view class="up">
    			<span class="title">登录哈哈哈哈售电系统</span>
    			<view class="img1" @click="Tuichu()"></view> //点击返回登录页面
    		</view>
    		<!-- 下拉框 -->
    		<view class="data2">
    			<view class="tubiao"></view>
    			<text style="font-size: 15px;color: #798ea9;">测点管理:</text>
    			<view class="select">
    				<picker mode="selector" :range="schoolList" range-key="stationName" @change="schoolChange">
    					<span style="margin-left: 10px;">{{before_school? before_school: '请选择' }}</span>
    				</picker>
    			</view>
    		</view>
    	</view>
    
    data() {
    			return {
    				userid:'', //从登录页面传递过来的userid
    				index: 0,
    				shuju: [{}],
    				// 在picker列表所选中项的befor_school
    				before_school: '',
    				// 在picker列表所选中项的id
    				sid: '',
    				// 学校列表(假数据,可以在getSchoolList函数里面发请求获取真实的业务后台数据)
    				schoolList: [{
    					id: 1,
    					school_name: '西京学院'
    				}, ]
    			}
    		},
    
    mounted() {
    		 this.userid = localStorage.getItem('USERID');
    		 this.getSchoolList()
    		},
    
    	methods: {
    		// 获取学校数据列表
    		getSchoolList() {
    			uni.request({
    				url: 'ip/GetStationName?userId='+this.userid, //仅为示例,并非真实接口地址。
    				method: 'GET',
    				success: (res) => {
    					console.log(res.data);
    					this.schoolList = res.data.result;
    				}
    			});
    		},
    		//点击后传递数值的地方
    		schoolChange(e) {
    			const index = e.target.value
    			this.before_school = this.schoolList[index].stationName
    			this.sid = this.schoolList[index].id
    			uni.request({
    				url: 'ip/selectParamter?stationId='+this.sid, //仅为示例,并非真实接口地址。
    				method: 'GET',
    				header: {
    					'Content-type': 'application/x-www-form-urlencoded'
    				},
    				success: (res) => {
    					console.log(res)
    				}
    			});
    		},
    		//点击按钮返回主页面
    			Tuichu(){
    				uni.redirectTo({
    				    url: './index'
    				});
    			}
    			
    		},
    

    css

    #data{
    		width: 100%;
    		height: 1400rpx;
    		background-color: pink;
    		}
    		.up{
    			width: 100%;
    			height: 100rpx;
    			background-color: #184a7f;
    			display: flex;
    			align-items: center;
    		}
    		.title{
    			color: #FFFFFF;
    			font-size: 15px;
    			
    		}
    		.img1{
    			width: 5%;
    			height: 40rpx;
    			margin-left: 50%;
    			background-image: url(../../static/main/tuichu.png);
    			background-position: center;
    			background-repeat: no-repeat;
    			background-size: 100% 100%;
    		}
    	/* 下拉框 */
    	uni-view.data2 {
    		width: 90%;
    		height: 53px;
    		color: white;
    		margin-top: 20px;
    		margin-left: 5%;
    	}
        .select {
    		width: 70%;
    		float: right;
    		height: 24px;
    		color: #FFFFFF !important;
    		border: #b7d4e6 solid 1px !important;
    		font-weight: 420;
    	}
    .tubiao{
    	width: 6%;
    	height: 40rpx;
    	float: left;
    	background-image: url(../../static/main/cedian.png); //图片路径换成自己的
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: 80% 80%;
    }
    
    展开全文
  • uni-app下拉框实现

    2020-12-18 18:43:26
    uni-app下拉框实现,纯原生写法
  • uniapp搜索下拉框

    2022-07-25 14:39:40
    搜索下拉框

    1.定义插件

    components/superwei-combox/superwei-combox.vue

    <template>
    	<view class="superwei-combox" :class="border ? '' : 'superwei-combox__no-border'">
    		<view v-if="label" class="superwei-combox__label" :style="labelStyle">
    			<text>{{label}}</text>
    		</view>
    		<view class="superwei-combox__input-box">
    			<input class="superwei-combox__input" type="text" :placeholder="placeholder" 
    				placeholder-class="superwei-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
    				@blur="onBlur" />
    			<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
    			</uni-icons>
    		</view>
    		<view class="superwei-combox__selector" v-if="showSelector">
    			<view class="uni-popper__arrow"></view>
    			<scroll-view scroll-y="true" class="superwei-combox__selector-scroll">
    				<view class="superwei-combox__selector-empty" v-if="filterCandidatesLength === 0">
    					<text>{{emptyTips}}</text>
    				</view>
    				<view class="superwei-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
    					@click="onSelectorClick(index)">
    					<text
    						:style="(isJSON?item[keyName]?item[keyName]==inputVal:false:item==inputVal)?'font-weight: bold;background-color: '+selectedBackground+';color: '+selectedColor:''">{{isJSON?item[keyName]?item[keyName]:'字段'+keyName+'不存在':item}}</text>
    				</view>
    			</scroll-view>
    		</view>
    	</view>
    </template>
    
    <script>
    	/**
    	 * Combox 组合输入框
    	 * @description 组合输入框一般用于既可以输入也可以选择的场景
    	 * @property {String} label 左侧文字
    	 * @property {String} labelWidth 左侧内容宽度
    	 * @property {String} placeholder 输入框占位符
    	 * @property {Array} candidates 候选项列表
    	 * @property {String} emptyTips 筛选结果为空时显示的文字
    	 * @property {String} value 组合框的值
    	 * @property {String} selectedBackground 选中项背景颜色
    	 * @property {String} selectedColor 选中项文字颜色
    	 * @property {Boolean} isJSON 是否是json数组
    	 * @property {String} keyName json数组显示的字段值
    	 */
    	export default {
    		name: 'superweiCombox',
    		emits: ['input', 'update:modelValue','select'],
    		props: {
    			isJSON: {
    				type: Boolean,
    				default: false
    			},
    			keyName: {
    				type: String,
    				default: ''
    			},
    			selectedBackground: {
    				type: String,
    				default: '#f5f7fa'
    			},
    			selectedColor: {
    				type: String,
    				default: '#409eff'
    			},
    			border: {
    				type: Boolean,
    				default: true
    			},
    			label: {
    				type: String,
    				default: ''
    			},
    			labelWidth: {
    				type: String,
    				default: 'auto'
    			},
    			placeholder: {
    				type: String,
    				default: ''
    			},
    			candidates: {
    				type: Array,
    				default () {
    					return []
    				}
    			},
    			emptyTips: {
    				type: String,
    				default: '无匹配项'
    			},
    			// #ifndef VUE3
    			value: {
    				type: [String, Number],
    				default: ''
    			},
    			// #endif
    			// #ifdef VUE3
    			modelValue: {
    				type: [String, Number],
    				default: ''
    			},
    			// #endif
    		},
    		data() {
    			return {
    				isInput: false,
    				showSelector: false,
    				inputVal: ''
    			}
    		},
    		computed: {
    			labelStyle() {
    				if (this.labelWidth === 'auto') {
    					return ""
    				}
    				return `width: ${this.labelWidth}`
    			},
    			filterCandidates() {
    				if (this.isInput) {
    					if (this.isJSON) {
    						return this.candidates.filter((item) => {
    							return item[this.keyName].toString().indexOf(this.inputVal) > -1
    						})
    					} else {
    						return this.candidates.filter((item) => {
    							return item.toString().indexOf(this.inputVal) > -1
    						})
    					}
    				} else {
    					return this.candidates
    				}
    			},
    			filterCandidatesLength() {
    				return this.filterCandidates.length
    			}
    		},
    		watch: {
    			// #ifndef VUE3
    			value: {
    				handler(newVal) {
    					this.inputVal = newVal
    					this.isInput = true
    				},
    				immediate: true
    			},
    			// #endif
    			// #ifdef VUE3
    			modelValue: {
    				handler(newVal) {
    					this.inputVal = newVal
    					this.isInput = true
    				},
    				immediate: true
    			},
    			// #endif
    		},
    		methods: {
    			toggleSelector() {
    				this.showSelector = !this.showSelector
    				this.isInput = false
    			},
    			onFocus() {
    				this.showSelector = true
    				this.isInput = false
    			},
    			onBlur() {
    				setTimeout(() => {
    					this.showSelector = false
    					this.isInput = false
    				}, 153)
    			},
    			onSelectorClick(index) {
    				let item = this.filterCandidates[index]
    				if(this.isJSON){
    					this.inputVal = item[this.keyName]
    				}else{
    					this.inputVal = item
    				}
    				this.showSelector = false
    				this.$emit('input', this.inputVal)
    				this.$emit('update:modelValue', this.inputVal)
    				this.$emit('select', item)
    			},
    			onInput() {
    				setTimeout(() => {
    					this.$emit('input', this.inputVal)
    					this.$emit('update:modelValue', this.inputVal)
    				})
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	
    	@media only screen and (max-width: 999px) {
    	
    		/* 针对手机: */
    		.superwei-combox {
    			font-size: 14px;
    			border: 0px solid #12b7f5;
    			border-radius: 4px;
    			padding: 6px 10px;
    			position: relative;
    			/* #ifndef APP-NVUE */
    			display: flex;
    			/* #endif */
    			// height: 40px;
    			flex-direction: row;
    			align-items: center;
    			// border-bottom: solid 1px #DDDDDD;
    		}
    	
    	}
    	@media only screen and (min-width: 1000px) {
    	
    		/* 针对手机: */
    		.superwei-combox {
    			font-size: 14px;
    			border: 2px solid #12b7f5;
    			border-radius: 4px;
    			padding: 6px 10px;
    			position: relative;
    			/* #ifndef APP-NVUE */
    			display: flex;
    			/* #endif */
    			// height: 40px;
    			flex-direction: row;
    			align-items: center;
    			// border-bottom: solid 1px #DDDDDD;
    		}
    	
    	}
    	
    	
    
    	.superwei-combox__label {
    		font-size: 16px;
    		line-height: 22px;
    		padding-right: 10px;
    		color: #999999;
    	}
    
    	.superwei-combox__input-box {
    		position: relative;
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex: 1;
    		flex-direction: row;
    		align-items: center;
    	}
    
    	.superwei-combox__input {
    		flex: 1;
    		font-size: 14px;
    		height: 22px;
    		line-height: 22px;
        text-align: right;
    	}
    
    	.superwei-combox__input-plac {
    		font-size: 14px;
    		color: #999; //placeholder-style="color:#FFFFFF"
    	}
    
    	.superwei-combox__selector {
    		/* #ifndef APP-NVUE */
    		box-sizing: border-box;
    		/* #endif */
    		position: absolute;
    		top: calc(100% + 12px);
    		left: 0;
    		width: 100%;
    		background-color: #FFFFFF;
    		border: 1px solid #EBEEF5;
    		border-radius: 6px;
    		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    		// z-index: 2;
    		padding: 4px 0;
        height: 190px;
        z-index: 999;
    	}
    
    	.superwei-combox__selector-scroll {
    		/* #ifndef APP-NVUE */
    		max-height: 180px;
    		box-sizing: border-box;
    		/* #endif */
    	}
    
    	.superwei-combox__selector-empty,
    	.superwei-combox__selector-item {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		cursor: pointer;
    		/* #endif */
    		line-height: 36px;
    		font-size: 14px;
    		text-align: center;
    		// border-bottom: solid 1px #DDDDDD;
    		padding: 0px 0px;
    	}
    
    	.superwei-combox__selector-empty text,
    	.superwei-combox__selector-item text {
    		width: 100%;
    	}
    
    	.superwei-combox__selector-item:hover {
    		background-color: #f9f9f9;
    	}
    
    	.superwei-combox__selector-empty:last-child,
    	.superwei-combox__selector-item:last-child {
    		/* #ifndef APP-NVUE */
    		border-bottom: none;
    		/* #endif */
    	}
    
    	// picker 弹出层通用的指示小三角
    	.uni-popper__arrow,
    	.uni-popper__arrow::after {
    		position: absolute;
    		display: block;
    		width: 0;
    		height: 0;
    		border-color: transparent;
    		border-style: solid;
    		border-width: 6px;
    	}
    
    	.uni-popper__arrow {
    		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
    		top: -6px;
    		left: 80%;
    		margin-right: 3px;
    		border-top-width: 0;
    		border-bottom-color: #EBEEF5;
    	}
    
    	.uni-popper__arrow::after {
    		content: " ";
    		top: 1px;
    		margin-left: -6px;
    		border-top-width: 0;
    		border-bottom-color: #fff;
    	}
    
    	.superwei-combox__no-border {
    		border: none;
    	}
    </style>
    

    2.页面引用

    index.vue

    <view>
    <superwei-combox :candidates="candidates" :isJSON="true" keyName="name" placeholder="请选择"
              v-model="inputValue" @input="inputs" @select="select3"></superwei-combox>
    </view>
    
    <script>
    import superweiCombox from '@/components/superwei-combox/superwei-combox'
      export default {
        components: {
          superweiCombox
        },
    data() {
          return {
        candidates: [],
        inputValue: '',
        
    },
    methods: {
    inputs(e) {
            console.log(e) // 选项一
          },
    select3(e) {
            console.log(e.id) // {id: '1',name: '选项一'}
            this.operateId = e.id
          },
    Rectification(){
            this.$api.GetStaffNameList().then((res) => {
              if (res) {
                this.candidates = res.data
                this.candidates.forEach((resItem, resIndex) => {
                  resItem.name=resItem.text
                  resItem.id=resItem.id
                })
              }
            });
          },
    }
    
    }
    </script>

    展开全文
  • uniapp设置下拉框并获取下拉框

    万次阅读 热门讨论 2020-02-27 20:28:28
    uniapp设置下拉框: <view class="uni-form-item uni-column"> <picker @change="bindPickerChange" :range="array"> //@change用于获取下拉框改变的值,:range用于循环遍历array数组将数组内容循环 ...

    uniapp设置下拉框:
    下拉框

    <view class="uni-form-item uni-column">
    	<picker @change="bindPickerChange" :range="array">	//@change用于获取下拉框改变的值,:range用于循环遍历array数组将数组内容循环
    		<label>国籍:</label>
    		<label class="">{{array[index]}}</label>		//循环array数组index为索引
    	</picker>
    </view>
    
    *下面是定义的数组和索引:*
    

    定义数组
    最后是获取下拉框的值:
    下拉框取值

    //下拉框
    bindPickerChange: function(e) {		//改变的事件名
    	//console.log('picker发送选择改变,携带值为', e.target.value)   用于输出改变索引值
    	this.index = e.target.value			//将数组改变索引赋给定义的index变量
    	this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
    //	console.log("籍贯为:",this.jg)		//输出获取的籍贯值,例如:中国
    },
    

    效果如下:
    效果图
    uniapp下拉框其实还有很多方法,我这个只是很粗糙的一个!

    展开全文
  • uniapp-select 下拉框

    千次阅读 2022-05-25 14:41:18
    目前uniapp下拉框中比较友好的,功能比较完善 链接:superwei-combox 组合框 - DCloud 插件市场 下拉搜索选择组合框,基于官方uni-combox组件,解决选择后再次选择不展示全部选项的问题,支持模糊搜索和JSON数组格式...
  • uniapp 可搜索下拉框

    千次阅读 2022-05-29 10:12:28
    基于uniapp官方的picker实现(也可以自定义select)。. 查询返回数据集之后先备份成backupData。 增加一个输入框,用来输入要模糊查询的内容。 增加一个“定位”按钮,用于把模糊内容查出来。 增加一个“恢复”...
  • uniapp封装的下拉框组件

    千次阅读 2020-12-18 18:59:12
    uniapp封装的下拉框组件,纯原生 整体图: 背景: 因为uniapp没有提供很方便的下拉框组件,所以想着自己封装一个,结果出人意料的好用 实现功能: 1、动态计算下拉框标题个数,动态分配样式,以实现等宽 2、点击时...
  • uniapp下拉框组件

    2022-09-20 10:40:43
    之前写过一个小程序的,引入单个下拉框是没有问题的,但是一个页面引入多个下拉框组件的话就会有bug,比如可以同时展开多个下拉框的问题,在此修复了。如果大家有什么好的办法可以告诉我一下嘛~如果想在js中输出this...
  • uniapp省市区选择,拉起弹窗选择,存在拉起动画,默认填值,监听改变。
  • uniapp-ThorUi下拉框出现出现的问题
  • uniapp 开发微信公众号,下拉框默认选中列表第一个
  • uniapp 二级联动.zip

    2020-06-19 11:25:19
    项目中开发心得项目中开发心得
  • 该项目用hbuilder可直接导入运行,实现多选框操作,对于初学者,学习遍历,动态给样式赋值。
  • uni-app 自定义下拉框

    2022-09-14 15:42:35
    uni-app实现下拉选择框
  • uni-app实现select可输入下拉框 亲测有效
  • 今天又遇到一个小问题,就是uview的form组件表单验证无法正确判断select下拉框的值 照道理来说,应该是没问题的,问题出现在status的值是number类型,而rules的type默认验证string类型,所以一直判断验证...
  • uniapp 自定义下拉组件

    2022-05-31 13:23:58
    需求:类似于淘宝京东的分类栏,以及价格排序等等 原理:利用自定义的弹窗+css显示隐藏动画效果+slot来实现 1、先编写好自己需要的模板样式,并将各种传值类的东西定义好 特别注意:app端的slot名称无法动态改变 ...
  • 在通过uniapp做app开发的时候,有场景需要用到下拉选择框,但是使用的uview框架里的底部弹出的选择项形式产品又不满意。
  • 自定义下拉菜单
  • 首先去uni-app官网,查看这个表单选择器 官网建议您下载一下项目查看完整代码 然后通过官网给的文档您写代码 <view class="row b-b"> <text class="tit">...input cl..
  • 【uni-app】自定义下拉框组件

    千次阅读 2020-12-21 06:05:15
    设置下拉框展开收起的位置 this.getElementData('.dropdown-item__selected', (data)=>{ this.contentTop = data[0].bottom }) 该操作是为了设置下拉框的位置,使下拉框展开收起的动画效果在超出下拉框位置的时候就...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 416
精华内容 166
关键字:

uniapp下拉框