微信小程序实现下拉框（附代码）（微信小程序上拉下拉页面）

微信小程序实现下拉框（附代码）（微信小程序上拉下拉页面）

微信小程序里没有和HTML里的下拉框一样的组件，想要相同的效果只能自己写一个，先看效果

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

下面来看一下代码：

首先WXML

{{selectData[index]}} 5?300:selectData.length*60):0}}rpx;'> {{item}} -

然后WXSS（如果不想要动画，删掉wxss里的transition:transform 0.3s;和transition: height 0.3s;即可）

page{ background: #f3f7f7;}.select_box{ background: #fff; width: 80%; margin: 30rpx auto; position: relative;}.select{ box-sizing: border-box; width: 100%; height: 70rpx; border:1px solid #efefef; border-radius: 8rpx; display: flex; align-items: center; padding: 0 20rpx;}.select_text{ font-size: 30rpx; flex: 1;}.select_img{ width: 40rpx; height: 40rpx; display: block; transition:transform 0.3s;}.select_img_rotate{ transform:rotate(180deg); }.option_box{ position: absolute; top: 70rpx; width: 100%; border:1px solid #efefef; box-sizing: border-box; height: 0; overflow-y: auto; border-top: 0; background: #fff; transition: height 0.3s;}.option{ display: block; line-height: 40rpx; font-size: 30rpx; border-bottom: 1px solid #efefef; padding: 10rpx;}-

这里是JS

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。