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


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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
中止javascript执行的方法
Feb 14 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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
Phpbean路由转发的php代码
2008/01/10 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Django 反向生成url实例详解
2019/07/30 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
逻辑链路控制协议
2016/10/01 面试题
儿科护士自我鉴定
2013/10/14 职场文书
优秀求职信范文分享
2014/01/26 职场文书
企业文化建设实施方案
2014/03/22 职场文书
运动会标语
2014/06/21 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript