微信小程序?qū)崿F(xiàn)簡單的select下拉框
更新時(shí)間：2020年11月23日 11:28:28 作者：zk_csdn917
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
微信小程序?qū)崿F(xiàn)一個(gè)簡單的select下拉框，供大家參考，具體內(nèi)容如下
用的是transform過渡，沒用動畫
看看效果
廢話不多說，直接上代碼
wxml:
<view class="item">
<label class="first"><text>*</text>公司/商戶類型：</label>
<!-- 通過點(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)圖片過渡 */
}
.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;/* 高度變換過渡 */
}
.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,
})
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap學(xué)習(xí)筆記之初識bootstrap
Bootstrap是一款目前非常流行的前端框架，簡單的說，就是html,css,javascript的工具集。本文給大家介紹bootstrap學(xué)習(xí)筆記之初識bootstrap，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
表單通常用來收集網(wǎng)頁訪問者信息，常見的表單比如搜索引擎的搜索框、各網(wǎng)頁應(yīng)用的注冊或者登陸界面等。一個(gè)表單通常包括多個(gè)表單控件2021-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript類的寫法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法總結(jié)
懶加載是一種對網(wǎng)頁性能優(yōu)化的方式，也是我們經(jīng)常會用到的技術(shù)，這篇文章為大家整理了JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法，希望對大家有所幫助2023-06-06
這篇文章主要介紹了webpack4.x開發(fā)環(huán)境配置方法,結(jié)合實(shí)例形式詳細(xì)分析了webpack4.x的具體安裝、項(xiàng)目創(chuàng)建、打包操作等相關(guān)問題與處理技巧,需要的朋友可以參考下2018-08-08
這幾個(gè)demo上星期平安夜做的，感覺效果不錯(cuò)，就放在出來，分享給大家2012-01-01
實(shí)現(xiàn)類似于百度或谷歌的搜索下拉列表的，就是打開百度往里輸入你要查詢的條件，只要你一輸入他就自動彈出一個(gè)下拉列表框，并顯示相關(guān)所有搜索內(nèi)容2009-07-07
js前端加載超大圖片(100M以上)實(shí)現(xiàn)秒開的最佳解決方案
前端加載超大圖片時(shí),一般可以采取圖片壓縮,圖片分割,預(yù)加載等措施,而對于幾百M(fèi)或上G的大圖而言,不管對圖片進(jìn)行怎么優(yōu)化或加速處理,要實(shí)現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對大圖進(jìn)行分割,在前端進(jìn)行拼接實(shí)現(xiàn)秒開,需要的朋友可以參考下2023-10-10
javascript使用Dom改變超鏈接前面文本框的值...2007-08-08
本篇文章主要介紹了parabola.js拋物線與加入購物車效果的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10