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


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 JSQL,SQL无处不在,
May 05 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
javascript中length属性的探索
Jul 31 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
Vue实现滑动拼图验证码功能
Sep 15 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
javascript截取字符串小结
2015/04/28 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python更新列表的方法
2015/07/28 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
设计总监岗位职责
2013/12/07 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
处级干部考察材料
2014/12/24 职场文书
高三毕业评语
2014/12/31 职场文书
员工离职感谢信
2015/01/22 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
婚庆司仪开场白
2015/05/29 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
初中班主任心得体会
2016/01/07 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers