微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
更新時(shí)間：2020年11月23日 11:28:28 作者：zk_csdn917
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單的select下拉框，供大家參考，具體內(nèi)容如下
用的是transform過(guò)渡，沒(méi)用動(dòng)畫(huà)
看看效果
廢話不多說(shuō)，直接上代碼
wxml:
<view class="item">
<label class="first"><text>*</text>公司/商戶類型：</label>
<!-- 通過(guò)點(diǎn)擊事件改變圖片的旋轉(zhuǎn)角度、自定義下拉框的高度 -->
<view class="value" bindtap="select">
<view style="display:inline-block;">{{type!=''?type:'選擇商戶類型'}}</view>
<image src="../img/sj@2x.png" class="sanjiao" style="{{isSelect?'transform:rotateZ(180deg)':''}}"/>
<!-- select -->
<view class="select" style="{{isSelect?'height:'+54*types.length+'rpx;':'border:0'}}">
<view class="type" catchtap="getType" wx:for="{{types}}" data-type="{{item}}" wx:key="type">{{item}}</view>
</view>
</view>
</view>
wxss:
.sanjiao{
width: 18rpx;
height: 10rpx;
margin-left: 20rpx;
transition: 0.5s;/* 選轉(zhuǎn)圖片過(guò)渡 */
}
.select{
position: absolute;
z-index: 10;
border: 2rpx solid #aaaaaa;
padding: 0 8rpx;
top:46rpx;
left: -10rpx;
width: 210rpx;
overflow: auto;
height: 0;
max-height: 200rpx;
background-color:#fff;
box-sizing: border-box;
transition: height 0.5s;/* 高度變換過(guò)渡 */
}
.select .type{
color: #aaaaaa;
border-top: 2px solid #dadada;
padding: 6rpx;
}
.select :first-child{
border: 0;
}
js
data: {
isSelect:false,//展示類型？
types:['類型一','類型二'],//公司/商戶類型
type:"",//公司/商戶類型
},
//點(diǎn)擊控制下拉框的展示、隱藏
select:function(){
var isSelect = this.data.isSelect
this.setData({ isSelect:!isSelect})
},
//點(diǎn)擊下拉框選項(xiàng)，選中并隱藏下拉框
getType:function(e){
let value = e.currentTarget.dataset.type
this.setData({
type:value ,
isSelect: false,
})
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap學(xué)習(xí)筆記之初識(shí)bootstrap
Bootstrap是一款目前非常流行的前端框架，簡(jiǎn)單的說(shuō)，就是html,css,javascript的工具集。本文給大家介紹bootstrap學(xué)習(xí)筆記之初識(shí)bootstrap，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
表單通常用來(lái)收集網(wǎng)頁(yè)訪問(wèn)者信息，常見(jiàn)的表單比如搜索引擎的搜索框、各網(wǎng)頁(yè)應(yīng)用的注冊(cè)或者登陸界面等。一個(gè)表單通常包括多個(gè)表單控件2021-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript類的寫(xiě)法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法總結(jié)
懶加載是一種對(duì)網(wǎng)頁(yè)性能優(yōu)化的方式，也是我們經(jīng)常會(huì)用到的技術(shù)，這篇文章為大家整理了JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法，希望對(duì)大家有所幫助2023-06-06
webpack4.x開(kāi)發(fā)環(huán)境配置詳解
這篇文章主要介紹了webpack4.x開(kāi)發(fā)環(huán)境配置方法,結(jié)合實(shí)例形式詳細(xì)分析了webpack4.x的具體安裝、項(xiàng)目創(chuàng)建、打包操作等相關(guān)問(wèn)題與處理技巧,需要的朋友可以參考下2018-08-08
這幾個(gè)demo上星期平安夜做的，感覺(jué)效果不錯(cuò)，就放在出來(lái)，分享給大家2012-01-01
JS 自動(dòng)完成 AutoComplete(Ajax 查詢)
實(shí)現(xiàn)類似于百度或谷歌的搜索下拉列表的，就是打開(kāi)百度往里輸入你要查詢的條件，只要你一輸入他就自動(dòng)彈出一個(gè)下拉列表框，并顯示相關(guān)所有搜索內(nèi)容2009-07-07
js前端加載超大圖片(100M以上)實(shí)現(xiàn)秒開(kāi)的最佳解決方案
前端加載超大圖片時(shí),一般可以采取圖片壓縮,圖片分割,預(yù)加載等措施,而對(duì)于幾百M(fèi)或上G的大圖而言,不管對(duì)圖片進(jìn)行怎么優(yōu)化或加速處理,要實(shí)現(xiàn)秒開(kāi)也是不太可能的事情,所以本文小編將給大家介紹如何對(duì)大圖進(jìn)行分割,在前端進(jìn)行拼接實(shí)現(xiàn)秒開(kāi),需要的朋友可以參考下2023-10-10
javascript使用Dom改變超鏈接前面文本框的值...2007-08-08
parabola.js拋物線與加入購(gòu)物車效果的示例代碼
本篇文章主要介紹了parabola.js拋物線與加入購(gòu)物車效果的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10