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


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-世界上误解最深的语言分析
Aug 12 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
js中的this关键字详解
Sep 25 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 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函数代码
2010/04/22 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
joomla数据库操作示例代码
2016/01/06 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue按需加载实例详解
2019/09/06 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
python如何实现异步调用函数执行
2019/07/08 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
实习单位评语
2014/04/26 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
元宵节寄语大全
2015/02/27 职场文书
2015年库房工作总结
2015/04/30 职场文书
环境卫生整治简报
2015/07/20 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
Golang连接并操作MySQL
2022/04/14 MySQL
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
MySQL事务的隔离级别详情
2022/07/15 MySQL