微信小程序实现简单的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提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 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 高性能书写
2010/12/11 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
EM算法的python实现的方法步骤
2018/01/02 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android