介绍页面{
,,背景:# f3f7f7;
}
.select_box {
,,背景:# fff;
,,宽度:80%;
保证金才能:30 rpx 汽车;
位置:,才能相对;
}
.select {
,,box-sizing: border-box;
,,宽度:100%;
,,身高:70 rpx;
边境才能:1 px solid # efefef;
,,这个特性:8 rpx;
,,显示:flex;
,,对齐项目:中心;
,,填充:0,20 rpx;
}
.select_text {
,,字体大小:30 rpx;
flex才能:1;
}
.select_img {
,,宽度:40 rpx;
,,身高:40 rpx;
,,显示:块;
过渡才能:transform 0.3年代;
}
.select_img_rotate {
变换才能:旋转(180度),,
}
.option_box {
位置:才能,绝对;
,,:70 rpx;
,,宽度:100%;
边境才能:1 px solid # efefef;
,,box-sizing: border-box;
,,身高:0;
,,overflow-y:汽车;
,,border-top: 0;
,,背景:# fff;
过渡:才能,height 0.3年代;
}
.option {
,,显示:块;
,,行高:40 rpx;
,,字体大小:30 rpx;
边界底部才能:1 px solid # efefef;
,,填充:10 rpx;
} 页面({
,,数据:{
,,,表明:假的,//控制下拉列表的显示隐藏,假隐藏,真的显示
,,,selectData:[& # 39; 1 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;, & # 39; 4 & # 39;, & # 39; 5 & # 39;, & # 39; 6 & # 39;],//下拉列表的数据
,,,指数:0//选择的下拉列表下标
,,},//,才能点击下拉显示框
selectTap才能(){
,,,this.setData ({
,,,,,表明:! this.data.show
,,,});
,,},//,才能点击下拉列表
optionTap才能(e) {
,,,let 指数=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
,,,this.setData ({
,,,,,指数:指数,
,,,,,表明:this.data.show
,,,});
,,},
onLoad才能:function (选项),{
,,
,,}
})
这篇文章将为大家详细讲解有关小程序中实现下拉框的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果
<文本类='选项'风格={{指数==selectData.length-1&&”边界:0;“}}='的天气:{{selectData}}“天气:关键=闭飧觥安牧现甘?'{{指数}}' catchtap=' optionTap '>{{项}}
5 ? 300: selectData.length * 60): 0}} rpx; - - - - - -给改变下拉框高度,实现下拉框的显示隐藏,每个下拉选项的高度为60,下拉框的最大高度这里设置的是300年,所以这里写成当数据长度大于5时,下拉框高度为300,反之下拉框高度为数据长度乘以60
指数==selectData.length-1&&”边界:0,“- - - - - -取消下拉选项的最后一个的下边框
- ->
然后wxs(如果不想要动画,删掉wxs里的转型:变换0.3年代;和转型:身高0.3年代;即可)
这里是JS
关于“小程序中实现下拉框的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
