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


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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
Javascript面向对象编程
Mar 18 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 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来处理多个提交任务
2006/10/09 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
javascript基本语法
2016/05/31 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python-numpy-指数分布实例详解
2019/12/07 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
资源工程专业毕业生求职信
2014/02/27 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
海洋天堂观后感
2015/06/05 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python