您好,登錄后才能下訂單哦!
本篇內容主要講解“微信小程序如何實現下拉選項框”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“微信小程序如何實現下拉選項框”吧!
效果圖
test.js
/** * 頁面的初始數據 */ 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 }); },
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); }
到此,相信大家對“微信小程序如何實現下拉選項框”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。