微信小程序实现下拉选项框
这篇文章主要为大家详细介绍了微信小程序实现下拉选项框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现下拉选项框的具体代码，供大家参考，具体内容如下
效果图
test.js
/** * 页面的初始数据 */ data: { shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示 selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据 indexs: 0, //选择的下拉列 表下标, }, // 点击下拉显示框 selectTaps() { this.setData({ shows: !this.data.shows, }); }, // 点击下拉列表 optionTaps(e) { let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标 console.log(Indexs) this.setData({ indexs: Indexs, shows: !this.data.shows }); },test.wxml
地址 {{selectDatas[indexs]}} {{item}}
test.wxss
/* fenlei */ .fenlei{ margin: 0 25rpx; height: 90rpx; line-height: 90rpx; border-bottom: 1rpx solid #e6e6e6; display: flex; align-items: center; } .fenlei text{ font-size: 30rpx; color: #999999; margin-left: 15rpx; } /* 下拉框 */ .select_box { background: #fff; width: 620rpx; /* margin: 0 auto; */ height: 90rpx; line-height: 90rpx; text-align: left; position: relative; } .select { box-sizing: border-box; width: 100%; height: 86rpx; /* border: 1px solid #efefef; */ border-radius: 8rpx; display: flex; align-items: center; padding: 0 20rpx; } .select_text { font-size: 28rpx; flex: 1; color: rgb(102, 102, 102); line-height: 86rpx; height: 86rpx; } .select_img { width: 40rpx; height: 40rpx; display: block; transition: transform 0.3s; } .select_img_rotate { transform: rotate(180deg); } .option_box { position: absolute; top: 86rpx; width: 100%; /* border: 1px solid #efefef; */ box-sizing: border-box; height: 0; overflow-y: auto; border-top: 0; background: #fff; transition: height 0.3s; z-index: 100; } .option { display: block; line-height: 40rpx; font-size: 28rpx; border-bottom: 1px solid #efefef; padding: 10rpx; color: rgb(102, 102, 102); }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
标签：