介绍 & lt; view 类=& # 39;顶部# 39;比;
,,,& lt; view 类=& # 39;top-text& # 39;祝辞,选择接收班级& lt;/view>
,,,& lt; !——,下拉框,——比;
,,,& lt; view 类=& # 39;top-selected& # 39;, bindtap=& # 39; bindShowMsg& # 39;比;
,,,,,& lt; text> {{grade_name}} & lt;/text>
,,,,,& lt; image src=https://www.yisu.com/zixun/'/图片/图标/down.png '>
<！——下拉需要显示的列表- ->
<视图类=" select_box”天气:如果="{{选择}}">
<查看天气:="{{成绩}}”天气:关键="独特">
<视图类=" select_one“bindtap=癿ySelect”数据名="{{项}}">{{项}}
/*,顶部,直*/上{
,,宽度:100大众;
,,身高:80 rpx;
,,填充:0,20 rpx;
,,行高:80 rpx;
,,字体大小:34 rpx;
边界底部才能:1 px solid # 000;
}.top-text {
浮:,才能离开}/*,下拉框,*/.top-selected {
,,,宽度:,50%;
,,,显示:,flex;
,,,浮动:,;
,,,对齐项目:,中心;
,,,justify-content:,之间的空间;
边境:,,,,1 px solid # ccc;
,,,填充:,0,10 rpx;
,,,字体大小:,30 rpx;
}/*,下拉内容,*/.select_box {
background - color,,,,, # fff;
,,,填充:,0,20 rpx;
,,,宽度:,50%;
,,,浮动:,;
,,,位置:,相对;
,,,右:,0;
,,,z - index:, 1;
,,,溢出:,隐藏;
,,,text-align:,;
动画:,,,,myfirst 0.5年代;
,,,字体大小:,30 rpx;
}.select_one {
,,,padding-left:, 20 rpx;
,,,宽度:,100%;
,,,身高:,60 rpx;
,,,位置:,相对;
,,,行高:,60 rpx;
,,,边界底部:,1 px solid # ccc;
}/*,下拉过度效果,*/@keyframes myfirst {
,,,,得到{
,,,,,,,身高:,0 rpx;
,,,}
,
,,,用{
,,,,,,,,身高:210 rpx;
,,,}}/*,下拉图标,{*/.top-selected 图像
高度才能:50 rpx;
宽度:才能50 rpx;
位置:才能,绝对;
,,右:0 rpx;
,,:20 rpx;
} ,/* *
,,*,页面的初始数据,,*/,,数据:{
,,,选择:假的,
,,,grade_name: & # 39;——请选择,& # 39;,
,,,成绩:,,,,,,,,& # 39;猛犸机器人1班& # 39;,,,,,,,,,& # 39;猛犸机器人2班& # 39;,,,,,,,,,& # 39;口才1班& # 39;,
,,,,,)
},/* *才能
,*,点击下拉框,*/bindShowMsg才能(),{,,,this.setData ({
,,,,,选择:! this.data.select
,,,})
},/* *才能
,*已选下拉框,*/mySelect才能(e), {
,,,console.log (e),,,, var name =, e.currentTarget.dataset.name ,,, this.setData ({
,,,,,grade_name:,名字,
,,,,,选择:假
,,,})
,,},
这篇文章主要介绍微信小程序实现下拉框效果的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
微信小程序组件里没有下拉框,正好要用的到,记下来以后参考
wxml代码:
wxs代码:
js代码:
效果展示:
以上是“微信小程序实现下拉框效果的案例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
