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


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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
layUI实现列表查询功能
Jul 27 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
封装html的select标签的js操作实例
2013/07/02 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
使用python实现学生信息管理系统
2021/02/25 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
金融管理应届生求职信
2014/02/20 职场文书
中国入世承诺
2014/04/01 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
体育教师个人总结
2015/02/09 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
创业计划书之物流运送
2019/09/17 职场文书
python b站视频下载的五种版本
2021/05/27 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫