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


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 相关文章推荐
JS求平均值的小例子
Nov 29 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
详解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下MAIL的另一解决方案
2006/10/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP文件操作详解
2016/12/30 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
学生档案自我鉴定
2013/10/07 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
产品质量保证书
2014/04/29 职场文书
学习三严三实心得体会
2014/10/13 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
追讨欠款律师函
2015/05/27 职场文书
文艺晚会开场白
2015/05/29 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
工程移交协议书
2016/03/24 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
为什么node.js不适合大型项目
2021/04/28 Javascript