微信小程序实现下拉框功能


Posted in Javascript onJuly 16, 2019

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果

微信小程序实现下拉框功能

下面来看一下代码:

首先WXML

<view class='select_box'>
 <view class='select' catchtap='selectTap'>
  <text class='select_text'>{{selectData[index]}}</text>
  <image class='select_img {{show&&"select_img_rotate"}}' src='/image/gobottom.png'></image>   
 </view>
 <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
  <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>
 </view>
</view>
<!--
 show&&"select_img_rotate"-----给显示框右边的下拉箭头添加动画

 height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;-----给改变下拉框高度,实现下拉框的显示隐藏,每个下拉选项的高度为60,下拉框的最大高度这里设置的是300,所以这里写成当数据长度大于5时,下拉框高度为300,反之下拉框高度为数据长度乘以60

 index==selectData.length-1&&"border:0;"-----取消下拉选项的最后一个的下边框
 -->

然后WXSS(如果不想要动画,删掉wxss里的transition:transform 0.3s;和transition: height 0.3s;即可)

page{
 background: #f3f7f7;
}
.select_box{
 background: #fff;
 width: 80%;
 margin: 30rpx auto;
 position: relative;
}
.select{
 box-sizing: border-box;
 width: 100%;
 height: 70rpx;
 border:1px solid #efefef;
 border-radius: 8rpx;
 display: flex;
 align-items: center;
 padding: 0 20rpx;
}
.select_text{
 font-size: 30rpx;
 flex: 1;
}
.select_img{
 width: 40rpx;
 height: 40rpx;
 display: block;
 transition:transform 0.3s;
}
.select_img_rotate{
 transform:rotate(180deg); 
}
.option_box{
 position: absolute;
 top: 70rpx;
 width: 100%;
 border:1px solid #efefef;
 box-sizing: border-box;
 height: 0;
 overflow-y: auto;
 border-top: 0;
 background: #fff;
 transition: height 0.3s;
}
.option{
 display: block;
 line-height: 40rpx;
 font-size: 30rpx;
 border-bottom: 1px solid #efefef;
 padding: 10rpx;
}

这里是JS

Page({

 data: {
 show:false,//控制下拉列表的显示隐藏,false隐藏、true显示
 selectData:['1','2','3','4','5','6'],//下拉列表的数据
 index:0//选择的下拉列表下标
 },
 // 点击下拉显示框
 selectTap(){
 this.setData({
  show: !this.data.show
 });
 },
 // 点击下拉列表
 optionTap(e){
 let Index=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
 this.setData({
  index:Index,
  show:!this.data.show
 });
 },
 onLoad: function (options) {
 
 }

})

完结!

有什么错误或者其他好的方法,请告知,谢谢

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

Javascript 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
javascript定时器完整实例
Feb 10 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
javascript中的this作用域详解
Jul 15 #Javascript
微信小程序页面上下滚动效果
Nov 18 #Javascript
node.js实现上传文件功能
Jul 15 #Javascript
js canvas实现5张图片合成一张图片
Jul 15 #Javascript
js使用文件流下载csv文件的实现方法
Jul 15 #Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 #Javascript
微信小程序开发技巧汇总
Jul 15 #Javascript
You might like
通过文字传递创建的图形按钮
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP安全下载文件的方法
2016/04/07 PHP
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
vue 项目常用加载器及配置详解
2018/01/22 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
Python制作Windows系统服务
2017/03/25 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python中函数参数调用方式分析
2018/08/09 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
面试通知短信
2015/04/20 职场文书
安全主题班会教案
2015/08/12 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
volatile保证可见性及重排序方法
2022/08/05 Java/Android