快捷導(dǎo)航

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

更新時(shí)間：2022年07月18日 15:38:44 作者：itfallrain

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

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

效果圖

test.js

/**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? shows: false, //控制下拉列表的顯示隱藏，false隱藏、true顯示
? ? selectDatas: ['消費(fèi)賬戶(hù)', '平臺(tái)返利賬戶(hù)', '微信錢(qián)包'], //下拉列表的數(shù)據(jù)
? ? indexs: 0, //選擇的下拉列 表下標(biāo),
? },

? // 點(diǎn)擊下拉顯示框
? selectTaps() {
? ? this.setData({
? ? ? shows: !this.data.shows,
? ? });
? },
? // 點(diǎn)擊下拉列表
? optionTaps(e) {
? ? let Indexs = e.currentTarget.dataset.index; //獲取點(diǎn)擊的下拉列表的下標(biāo)
? ? 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='../../images/sanjiao.png'></image> -->
? ? ? ? <image class='select_img {{shows&&"select_img_rotate"}}' src='../../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);
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: