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


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:sugggestion.js
Sep 02 Javascript
JavaScript函数详解
Nov 17 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
JS中Promise函数then的奥秘探究
Jul 30 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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编程语言开发动态WAP页面
2006/10/09 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Django学习笔记之Class-Based-View
2017/02/15 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
初中家长评语大全
2014/12/26 职场文书
老公婚前保证书
2015/02/28 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
师范生小学见习总结
2015/06/23 职场文书
小学体育组工作总结
2015/08/13 职场文书
《静夜思》教学反思
2016/02/17 职场文书
同学会演讲稿
2019/04/02 职场文书