微信小程序?qū)崿F(xiàn)下拉選項框
更新時間：2022年07月18日 15:38:44 作者：itfallrain
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)下拉選項框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)下拉選項框的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
test.js
/**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? shows: false, //控制下拉列表的顯示隱藏，false隱藏、true顯示
? ? selectDatas: ['消費賬戶', '平臺返利賬戶', '微信錢包'], //下拉列表的數(shù)據(jù)
? ? 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='../../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);
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在搭建博主博客的時候，尋思著做一些效果，看到菜單，就想是不是可以做一下顏色的漸變，增加一點動態(tài)的感覺。有個jquery的插件，效果相當不錯，不過博主還是打算自立更生寫一下，看看能不能實現(xiàn)2013-10-10
這篇文章主要介紹了詳解JavaScript修改注冊表的方法,本實例主要通過WshShell 對象的相關方法實現(xiàn),需要的朋友可以參考下2020-01-01
JavaScript實現(xiàn)讀取與輸出XML文件數(shù)據(jù)的方法示例
這篇文章主要介紹了JavaScript實現(xiàn)讀取與輸出XML文件數(shù)據(jù)的方法,結合實例形式分析了JavaScript基于ActiveXObject實現(xiàn)載入、讀取與輸出xml文件數(shù)據(jù)的相關操作技巧,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細介紹了JS畫布動態(tài)實現(xiàn)黑客帝國背景效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單可拖動的模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了JS打印方法的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了原生JS實現(xiàn)的跳一跳小游戲,結合完整實例形式分析了javascript實現(xiàn)跳一跳游戲的原理、實現(xiàn)步驟與相關操作技巧,需要的朋友可以參考下2019-01-01
本文給大家介紹js請求服務器gbk文件亂碼問題，解決辦法需要設置xhr.overrideMimeType("text/csv;charset=gb2312");才正確，具體代碼怎么設置，將在本文中給大家提到，需要的朋友一起學習吧2015-10-10
基于JavaScript Array數(shù)組方法(新手必看篇)
下面小編就為大家?guī)硪黄贘avaScript Array數(shù)組方法(新手必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
昨天閑著沒事，又因為工作需要，寫了一個腳本，用來做ftp。當然不是直接做ftp，而是產(chǎn)生一個ftp的腳本，供ftp命令使用。2013-07-07