微信小程序实现简单的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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
javascript string字符串优化问题
Jul 31 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
Bootstrap基础学习
Jun 16 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 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
C#静态方法与非静态方法实例分析
2014/09/22 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python实现图片彩色转化为素描
2019/01/15 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
小学生节约用水倡议书
2014/05/15 职场文书
软件测试专业推荐信
2014/09/18 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
公司地址变更通知
2015/04/25 职场文书
八月迷情观后感
2015/06/11 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript