小程序下拉框制作
浏览：477 次
1.首先，上一张效果图：
20190910_ 141145.gif
2.Wxml代码：
3.Js代码：
/**
*页面的初始数据
*/
数据：{
label:'confontsousuo图标sousuo-label'，
LabelData：“请输入搜索内容”，
deleteIcon:“”，
changeValue:“”，
选择：false
},
/**
*生命周期功能——监听页面加载
*/
onLoad:函数（选项）{
var=这个；
wx.获取系统信息({
成功：函数（res）{
var clientHeight=res.windowHeight，
clientWidth=res.windowWidth，
rpxR=750/客户端宽度；
var calc=客户端高度*rpxR；
that.setData（设置数据）({
winHeight:计算
});
}
})
var funC=选项.funC；
//设置导航栏的标题
wx.set导航栏标题({
标题：funC
});
这设置数据({
功能：功能
});
},
//下拉框事件
我的选择（e）{
var funC=e.currentTarget.dataset.name；
this.set数据({
选择：false，
功能：功能
})
//修改导航栏标题
wx.set导航栏标题({
标题：funC，
})
},
//下拉触发按钮
pull事件（e）{
this.set数据({
选择：true
})
},
4.Wxss代码：
.内容{
柔性：2；
显示器：柔性；
位置：相对；
光标：指针；
}
.选择框{
位置：绝对；
字体大小：30rpx；
顶部：85%；
左侧：0%；
宽度：101%；
背景色：#0073e1；
颜色：白色；
}
.框{
显示器：柔性；
弯曲方向：柱；
}
.选择一个{
左侧填充：23%；
保证金：0.6%；
边框底部：1px实心#aeaeae；
文本对齐：居中；
柔性：1；
}
.选择右侧{
左填充：16%；
}
.contentOne（内容一）{
柔性：2；
颜色：白色；
字体大小：30rpx；
/*弹性中心*/
显示器：柔性；
调整内容：灵活结束；
对齐项目：居中；
}
.content2，。搜索{
显示器：柔性；
调整内容：灵活结束；
对齐项目：居中；
}
