微信小程序实现select下拉框

这篇文章主要为大家详细介绍了微信小程序实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现select下拉框的具体代码，供大家参考，具体内容如下

实现代码如下：

                          {{selectDatas[indexs]}                                {{item}}

css:

/* fenlei */ .fenlei{   margin: 0 25rpx;   height: 80rpx;   line-height: 80rpx;   display: flex;   align-items: center;   background-color:#F5F6F7; } .fenlei text{   font-size: 30rpx;   color: #999999;   margin-left: 15rpx; } /* 下拉框 */ .select_box {   width: 100%;   text-align: left;   position: relative; } .select {   box-sizing: border-box;   width: 100%;   border-radius: 8rpx;   display: flex;   align-items: center;   padding: 0 20rpx; } .select_text {   font-size: 32rpx;   flex: 1;   color: #999999; } .select_img {   width: 37rpx;   height: 30rpx;   display: block;   transition: transform 0.3s; } .select_img_rotate {   transform: rotate(180deg); } .option_box {   position: absolute;   width: 100%;   box-sizing: border-box;   border-top: 0;   background: #fff;   z-index: 100;   text-align:center;   transition: height 0.3s;   overflow-y: auto; } .option-list {   display: block;   line-height: 106rpx;   font-size: 32rpx;   border-bottom: 1px solid #efefef;   padding: 10rpx;   color: rgb(102, 102, 102);   cursor: pointer; }

js:

 /**    * 页面的初始数据    */   data: {     shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示     selectDatas: ['再生资源回收点', '家政服务点', '综合超市','生鲜超市','邮政快递综合服务点','维修点','照相文印店','美容美发店'], //下拉列表的数据     indexs: 0, //选择的下拉列 表下标,   }, // 点击下拉显示框 selectTaps(e) {   console.log(e)   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   }); },

注意：用catchtap，而不用bindtap的原因是为了阻止事件冒泡！

效果如下：