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


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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
Django+Vue跨域环境配置详解
Jul 06 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生成HTML静态页面实例代码
2008/08/31 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
layui实现下拉框三级联动
2019/07/26 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python调用服务接口的实例
2019/01/03 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
秋收起义观后感
2015/06/11 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Python学习之异常中的finally使用详解
2022/03/16 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫