微信小程序实现简单的select下拉框


Posted in Javascript onNovember 23, 2020

微信小程序实现一个简单的select下拉框,供大家参考,具体内容如下

用的是transform过渡,没用动画

看看效果

微信小程序实现简单的select下拉框

废话不多说,直接上代码

wxml:

<view class="item">
 <label class="first"><text>*</text>公司/商户类型:</label>
 <!-- 通过点击事件改变图片的旋转角度、自定义下拉框的高度 -->
 <view class="value" bindtap="select">
 <view style="display:inline-block;">{{type!=''?type:'选择商户类型'}}</view>
 <image src="../img/sj@2x.png" class="sanjiao" style="{{isSelect?'transform:rotateZ(180deg)':''}}"/>
 <!-- select -->
 <view class="select" style="{{isSelect?'height:'+54*types.length+'rpx;':'border:0'}}">
 <view class="type" catchtap="getType" wx:for="{{types}}" data-type="{{item}}" wx:key="type">{{item}}</view>
 </view>
 </view>
</view>

wxss:

.sanjiao{
 width: 18rpx;
 height: 10rpx;
 margin-left: 20rpx;
 transition: 0.5s;/* 选转图片过渡 */
}
.select{
 position: absolute;
 z-index: 10;
 border: 2rpx solid #aaaaaa;
 padding: 0 8rpx;
 top:46rpx;
 left: -10rpx;
 width: 210rpx;
 overflow: auto;
 height: 0;
 max-height: 200rpx;
 background-color:#fff;
 box-sizing: border-box;
 transition: height 0.5s;/* 高度变换过渡 */
}
.select .type{
 color: #aaaaaa;
 border-top: 2px solid #dadada;
 padding: 6rpx;
}
.select :first-child{
 border: 0;
}

js

data: {
 isSelect:false,//展示类型?
 types:['类型一','类型二'],//公司/商户类型
 type:"",//公司/商户类型
 },
 //点击控制下拉框的展示、隐藏
 select:function(){
 var isSelect = this.data.isSelect
 this.setData({ isSelect:!isSelect})
 },
 //点击下拉框选项,选中并隐藏下拉框
 getType:function(e){
 let value = e.currentTarget.dataset.type
 this.setData({
 type:value ,
 isSelect: false,
 })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
记录一次websocket封装的过程
Nov 23 #Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 #Javascript
微信小程序实现锚点跳转
Nov 23 #Javascript
javascript实现电商放大镜效果
Nov 23 #Javascript
用webAPI实现图片放大镜效果
Nov 23 #Javascript
Vue 的 v-model用法实例
Nov 23 #Vue.js
JavaScript实现网页留言板功能
Nov 23 #Javascript
You might like
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
python实现简单温度转换的方法
2015/03/13 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python文件操作基础流程解析
2020/03/19 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
2015年保险公司个人工作总结
2015/05/22 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技