微信小程序实现简单的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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 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中memcache的应用
2013/06/18 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
python显示天气预报
2014/03/02 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
python线程中同步锁详解
2018/04/27 Python
python执行精确的小数计算方法
2019/01/21 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
一份全面的PHP面试问题考卷
2012/07/15 面试题
政工例会汇报材料
2014/08/26 职场文书
竞选学委演讲稿
2014/09/13 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
校运会新闻稿
2015/07/17 职场文书
学校食堂管理制度
2015/08/04 职场文书
python获取对象信息的实例详解
2021/07/07 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android