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


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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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文件的实现方法
2007/03/19 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
班级活动策划书
2014/02/06 职场文书
纠风工作实施方案
2014/03/15 职场文书
创先争优公开承诺书
2014/08/30 职场文书
部门2015年度工作总结
2015/04/29 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
详解Python常用的魔法方法
2021/06/03 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python