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

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

页面结构代码

view class=' top ' view class=' top-text '选择接收班级/view！-下拉框-view class=' top-selected ' bind tap=' bindshomsg ' text { { grade _ name } }/text image src='/images/icon/down。png '/图像/视图！-下拉需要显示的列表-view class=' select _ box ' wx : if=' { { select } } ' view wx : for=' { { grads } } ' wx : key=' unique ' view class=' select _ one ' bind tap=' my select ' data-name=' { { item } } ' { { item } }/view/view wxss代码

/* 顶部*/.顶部{宽度： 100大众；高： 80rpxpadding: 0 20rpx线高： 80 rpxfont-size : 34 rpx边框-底部： 1px实心# 000;}.顶部文本{左侧浮动： }/*下拉框*/.首选{宽度：50%；显示： flex向右浮动：align-items:居中；正义-内容：空格；border: 1px固体# cccpadding : 0 10 rpx font-size : 30 rpx；}/* 下拉内容*/.select_box {背景-color : # fff；padding: 0 20rpx宽度： 50%;向右浮动：相对位置：右： 0；z-index : 1；飞越：隐藏；文本-左对齐：animate : my first 0.5s font-size : 30 rpx；}.select _ one { padding-left : 20 rpx；宽度： 100%;高度： 60rpx相对位置：线高： 60 rpx边框-底部： 1px实心# ccc}/*下拉过度效果*/@关键帧myfirst { from { height: 0rpx}至{ height: 210rpx}}/*下拉图标*/.首选图像{ height:50rpx宽度宽度：50rpx绝对位置：right: 0rpxtop: 20rpx}js代码

/** * 页面的初始数据*/data: { select:false，grade_name:' -请选择-',等级： ['猛犸机器人一班', '猛犸机器人2班', '口才一班', ] },/** * 点击下拉框*/BindShowMSG(){ this。setDATa({ select :this.data.select }) }，/** *已选下拉框*/my select(e){控制台。log(e)var name=e . currenttarget。数据集。说出这个。setdata({ grade _ name : name，select: false }) }，

效果

总结

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