微信小程序?qū)崿F(xiàn)簡單的select下拉框
更新時間:2020年11月23日 11:28:28 作者:zk_csdn917
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單的select下拉框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
微信小程序?qū)崿F(xiàn)一個簡單的select下拉框,供大家參考,具體內(nèi)容如下
用的是transform過渡,沒用動畫
看看效果
廢話不多說,直接上代碼
wxml:
<view class="item"> <label class="first"><text>*</text>公司/商戶類型:</label> <!-- 通過點擊事件改變圖片的旋轉(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:"",//公司/商戶類型 }, //點擊控制下拉框的展示、隱藏 select:function(){ var isSelect = this.data.isSelect this.setData({ isSelect:!isSelect}) }, //點擊下拉框選項,選中并隱藏下拉框 getType:function(e){ let value = e.currentTarget.dataset.type this.setData({ type:value , isSelect: false, }) },
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
headjs實現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS
本文主要介紹如何使用head.js實現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS,提高網(wǎng)站加載速度。需要的朋友可以看下2016-11-11教你巧用?import.meta?實現(xiàn)熱更新的問題
import.meta?是一個給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象,它包含了這個模塊的信息,這篇文章主要介紹了巧用?import.meta?實現(xiàn)熱更新的問題,需要的朋友可以參考下2022-04-04JS中type="button"和type="submit"的區(qū)別
Submit是專門用于提交表單的Button,與Button的區(qū)別主要有兩點:type=button 就單純是按鈕功能,type=submit 是發(fā)送表單 。下面通過本文給大家分享JS中type="button"和type="submit"的區(qū)別,感興趣的的朋友一起看看吧2017-07-07微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果,代碼很簡單,直接復制即可根據(jù)自己的需求去修改,對小程序商品數(shù)據(jù)聯(lián)動實例代碼感興趣的朋友一起看看吧2022-08-08JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解
這篇文章主要介紹了JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09javascript使用Promise對象實現(xiàn)異步編程
這篇文章主要介紹了javascript使用Promise對象實現(xiàn)異步編程的相關(guān)資料,需要的朋友可以參考下2016-03-03