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


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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python多重继承实例
2014/10/11 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
把pandas转换int型为str型的方法
2019/01/29 Python
django配置app中的静态文件步骤
2020/03/27 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
工商管理应届生求职信
2013/10/07 职场文书
生日宴会答谢词
2014/01/09 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
自荐信模板大全
2015/03/27 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
罗马假日观后感
2015/06/08 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
《穷人》教学反思
2016/02/19 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript