快捷導航

微信小程序?qū)崿F(xiàn)select下拉框

更新時間：2022年07月08日 14:23:23 作者：小小小菜鳥1997

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)select下拉框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)select下拉框的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)代碼如下：

<view class="fenlei">
? ? <!-- 下拉框 -->
? ? <view class="select_box">
? ? ? <view class="select" catchtap="selectTaps">
? ? ? ? <text class="select_text">{{selectDatas[indexs]}</text>
? ? ? ? <image class="select_img:{{shows&&'select_img_rotate'}}"
? ?src="../../../static/img/lifeCircle/arroundServe/xiala.png"></image>
? ? ? </view>
? ? ? <view class="option_box" style="height:{{shows?(selectDatas.length>8?890:selectDatas.length*110):0}}rpx;">
? ? ? ? <text class="option-list" wx:for="{{selectDatas}}" wx:key="this" data-index="{{index}}" catchtap="optionTaps"
? ? ? ? ? style="{{indexs==selectDatas.length-1&&'border:0;'}}">{{item}}</text>
? ? ? </view>
? ? </view>
</view>

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:

?/**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? shows: false, //控制下拉列表的顯示隱藏，false隱藏、true顯示
? ? selectDatas: ['再生資源回收點', '家政服務(wù)點', '綜合超市','生鮮超市','郵政快遞綜合服務(wù)點','維修點','照相文印店','美容美發(fā)店'], //下拉列表的數(shù)據(jù)
? ? 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的原因是為了阻止事件冒泡！

效果如下：