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


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事件列表解说
Dec 22 Javascript
javascript下string.format函数补充
Aug 24 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Angular简单验证功能示例
Dec 22 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
js new Date()实例测试
Oct 31 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+javascript的日历控件
2009/11/19 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP静态文件生成类实例
2014/11/29 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python list操作用法总结
2015/11/10 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python数据结构之列表和元组的详解
2017/09/23 Python
django的csrf实现过程详解
2019/07/26 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
竞聘书格式及范文
2014/03/31 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS