微客导航 » 文章资讯 » 微信小程序select下拉框实现源码

微信小程序select下拉框实现源码

2023-08-09 16:26:09 300

这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

小程序中是没有h5中的下拉标签的所以要实现下拉功能就必须自己动手写拉，这里为了更清楚的显示小程序层级就把源码直接复制过来了



商品金额
￥99.00



{{tihuoWay}}



运费
免邮

实际付款
￥99.00



重庆分店
东莞南城分店
东莞总店

下面是js代码

Page({

/**
*页面的初始数据
*/
data:{
select:false,
tihuoWay:'门店自提'
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},
bindShowMsg(){
this.setData({
select:!this.data.select
})
},
mySelect(e){
varname=e.currentTarget.dataset.namethis.setData({
tihuoWay:name,
select:false
})
},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

.list-msg{
padding:020rpx;
background-color:#fff;
position:relative;
}

.list-msg1{
height:60rpx;
display:flex;
align-items:center;
justify-content:space-between;
}

.list-msg.list-msg2{
height:60rpx;
display:flex;
align-items:center;
justify-content:space-between;
border:1pxsolid#ccc;
padding:010rpx;
}

.select_box{
background-color:#eee;
padding:010rpx;
width:93%;
position:absolute;
top:130rpx;
z-index:1;
overflow:hidden;
animation:myfirst0.5s;
}

@keyframesmyfirst{
from{
height:0rpx;
}

to{
height:210rpx;
}
}

.select_one{
height:60rpx;
line-height:60rpx;
border-bottom:1pxsolid#ccc;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

微信小程序select下拉框实现源码

热门推荐

随机推荐