本文实例为大家分享了微信小程序实现下拉选项框的具体代码,供大家参考,具体内容如下
效果图
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
<view class='fenlei'> <text>地址</text> <!-- 下拉框 --> <view class='select_box'> <view class='select' catchtap='selectTaps'> <text class='select_text'>{{selectDatas[indexs]}}</text> <!-- <image class='words_img' src='https://www.atool.online/images/sanjiao.png'></image> --> <image class='select_img {{shows&&"select_img_rotate"}}' src='https://www.atool.online/images/sanjiao.png'></image> </view> <view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'> <text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text> </view> </view> </view>
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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。