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

微信小程序组件里没有下拉框，正好要用到，记下来以后参考

wxml代码

选择接收班级

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

})

效果

总结

以上所述是小编给大家介绍的微信小程序下拉框功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

下拉多选框微信小程序_微信小程序下拉框功能的实例代码相关推荐

python点名代码_基于python tkinter的点名小程序功能的实例代码
基于python tkinter的点名小程序功能的实例代码,花名册,次数,窗口,未找到,初始化基于python tkinter的点名小程序功能的实例代码易采站长站,站长之家为您整理了基于pytho ...
android筛选功能代码,Android中 TeaScreenPopupWindow多类型筛选弹框功能的实例代码
Github地址 YangsBryant/TeaScreenPopupWindow (Github排版比较好,建议进入这里查看详情,如果觉得好,点个star吧!) 引入module allprojec ...
android右滑返回动画,Android仿微信右滑返回功能的实例代码
先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的), 这些可以实现onTouchEvent来实现. ...
php创建菜单_php实现微信公众号创建自定义菜单功能的实例代码
目的创建自定义菜单,实现菜单事件. 首先获取Access_Token 接口: 我用的是测试号,修改APPID和APPSECRET,然后浏览器访问上面这个Url即可生成Access_Token 然后配 ...
如何微信链接自定义_微信链接自定义
微信在分享第三方网站是不显示缩略图和描述的,如下图所示微信链接自定义_微信链接自定义要解决这个问题必须调用微信JS-SDK接口,下面讲一下如何调用接口. 第一部分准备步骤注册微信公众号. 通过 ...
webview 个人小程序_微信小程序webview中，拉起小程序的微信支付 | 剑花烟雨江南...
由于最近公司业务调整,需要在小程序的webview中拉起小程序的微信支付,经过各种爬坑和搜索,找到如下结果方法,供大家参考: 一.判断小程序浏览器使用 USER_AGENT判断小程序还是公众号浏览器 ...
input ios问题小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色卸载placeholder-class里面的co ...
mysql传数据到微信小程序_微信小程序直播数据同步与转存
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本教程所用项目框架为egg ...
qml如何发布程序_微信小程序如何发布？公司和个人注册流程科普
如今制作微信小程序已经是非常简单的事了,即使是完全不懂技术的小白,也能利用小程序制作工具快速生成小程序,基本上选一个模板就能快速把页面搭建好. 不过,虽然小程序页面搭建很简单,但还有不少人不知道页面搭 ...

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

下拉多选框微信小程序_微信小程序下拉框功能的实例代码相关推荐

最新文章

热门文章

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

下拉多选框 微信小程序_微信小程序下拉框功能的实例代码相关推荐

最新文章

热门文章

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

下拉多选框微信小程序_微信小程序下拉框功能的实例代码相关推荐