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


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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
PHP通用检测函数集合
2006/11/25 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python用threading实现多线程详解
2017/02/03 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
网络营销计划
2015/01/17 职场文书
中学生运动会广播稿
2015/08/19 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记
Python OpenCV形态学运算示例详解
2022/04/07 Python