微信小程序下拉框功能的实例代码


Posted in Javascript onNovember 06, 2018

微信小程序组件里没有下拉框,正好要用到,记下来以后参考

wxml代码

<view class='top'>
  <view class='top-text'> 选择接收班级</view>
  <!-- 下拉框 -->
  <view class='top-selected' bindtap='bindShowMsg'>
   <text>{{grade_name}}</text>
   <image src='/images/icon/down.png'></image>
  </view>
  <!-- 下拉需要显示的列表 -->
  <view class="select_box" wx:if="{{select}}">
   <view wx:for="{{grades}}" wx:key="unique">
    <view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
   </view>
  </view>
 </view>

wxss代码

/* 顶部 */
.top{
 width: 100vw;
 height: 80rpx;
 padding: 0 20rpx;
 line-height: 80rpx;
 font-size: 34rpx;
 border-bottom: 1px solid #000;
}
.top-text{
 float: left
}
/* 下拉框 */
.top-selected{
  width: 50%;
  display: flex;
  float: right;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 0 10rpx;
  font-size: 30rpx;
}
/* 下拉内容 */
.select_box {
  background-color: #fff;
  padding: 0 20rpx;
  width: 50%;
  float: right;
  position: relative;
  right: 0;
  z-index: 1;
  overflow: hidden;
  text-align: left;
  animation: myfirst 0.5s;
  font-size: 30rpx;
}
.select_one {
  padding-left: 20rpx;
  width: 100%;
  height: 60rpx;
  position: relative;
  line-height: 60rpx;
  border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myfirst {
  from {
    height: 0rpx;
  }
 
  to {
    height: 210rpx;
  }
}
/* 下拉图标 */
.top-selected image{
 height:50rpx;
 width:50rpx;
 position: absolute;
 right: 0rpx;
 top: 20rpx;
}

js代码

/**
  * 页面的初始数据
  */
 data: {
  select:false,
  grade_name:'--请选择--',
  grades: [
    '猛犸机器人1班',
    '猛犸机器人2班',
    '口才1班',
   ]
 },/**
 * 点击下拉框
 */
 bindShowMsg() {
  this.setData({
   select: !this.data.select
  })
 },
/**
 * 已选下拉框
 */
 mySelect(e) {
  console.log(e)
  var name = e.currentTarget.dataset.name
  this.setData({
   grade_name: name,
   select: false
  })
 },

效果

微信小程序下拉框功能的实例代码

微信小程序下拉框功能的实例代码

总结

以上所述是小编给大家介绍的微信小程序下拉框功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
es6中reduce的基本使用方法
Sep 10 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 #Javascript
小程序实现页面顶部选项卡效果
Nov 06 #Javascript
Vue常用的几个指令附完整案例
Nov 06 #Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 #Javascript
100行代码实现一个vue分页组功能
Nov 06 #Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 #Javascript
Vue递归实现树形菜单方法实例
Nov 06 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
大学生毕业求职简历的自我评价
2013/10/24 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
法学专业求职信
2014/07/15 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
培训计划通知
2015/07/15 职场文书
教师素质教育心得体会
2016/01/19 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js