微信小程序select下拉框实现(附带源码)
时间:2018-11-07
本文章向大家介绍微信小程序select下拉框实现(附带源码),需要的朋友可以参考一下
微信小程序组件里没有下拉框,正好要用到,记下来以后参考
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 }) },
效果
- [C#2] 5-迭代器
- 服务器未能识别 HTTP 标头 SOAPAction 的值
- 实用代码-C#获取本机网络适配器信息及MAC地址
- WordPress 自定义 login (登录页面)CSS 样式
- [C#1] 12-特性
- HTTP Basic Authentication for RESTFul Service
- [C#2] 4-可空类型、静态类
- jquery 操作css 尺寸
- Windows 7上IIS出现http 500错误
- [C#2] 2-匿名方法
- jquery 操作css 选择器
- 主页后台源码及释义
- [C#2] 3-局部类型、属性访问器保护级别、命名空间别名限定符
- (2013.09更新)最新W3School 离线完整版CHM 电子书下载
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 面试老被问LinkedList源码?(深度剖析)
- 汽水瓶问题(非常interesting)
- 八种方法(实现两个数互换),绝了绝了!
- 当你触摸屏幕时手机都干了什么?你必须知道的Android事件传递
- 栈与队列:来看看栈和队列不为人知的一面
- 栈与队列:我用栈来实现队列怎么样?
- 栈与队列:用队列实现栈还有点别扭
- 短视频源码php,自动查找重复贴图
- 栈与队列:系统中处处都是栈的应用
- 长文慎入!大厂架构演进实战之手写 CAS 单点登录
- 栈与队列:匹配问题都是栈的强项
- SpringBoot源码学习(五)
- SpringBoot源码学习(六)
- SpringBoot源码学习(七)
- LeetCode52|有序数组中的单一元素