微信小程序实现下拉选项框

/**    * 页面的初始数据    */   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     });   },

   地址                        {{selectDatas[indexs]}}                                         {{item}}            

/* 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); }