微信小程序下拉框功能的實(shí)例代碼
微信小程序組件里沒有下拉框,正好要用到,記下來以后參考
wxml代碼
<view class='top'> <view class='top-text'> 選擇接收班級</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/down.png'></image> </view> <!-- 下拉需要顯示的列表 --> <view class="select_box" wx:if="{{select}}"> <view wx:for="{{grades}}" wx:key="unique"> <view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view> </view> </view> </view>
wxss代碼
/* 頂部 */ .top{ width: 100vw; height: 80rpx; padding: 0 20rpx; line-height: 80rpx; font-size: 34rpx; border-bottom: 1px solid #000; } .top-text{ float: left } /* 下拉框 */ .top-selected{ width: 50%; display: flex; float: right; align-items: center; justify-content: space-between; border: 1px solid #ccc; padding: 0 10rpx; font-size: 30rpx; } /* 下拉內(nèi)容 */ .select_box { background-color: #fff; padding: 0 20rpx; width: 50%; float: right; position: relative; right: 0; z-index: 1; overflow: hidden; text-align: left; animation: myfirst 0.5s; font-size: 30rpx; } .select_one { padding-left: 20rpx; width: 100%; height: 60rpx; position: relative; line-height: 60rpx; border-bottom: 1px solid #ccc; } /* 下拉過度效果 */ @keyframes myfirst { from { height: 0rpx; } to { height: 210rpx; } } /* 下拉圖標(biāo) */ .top-selected image{ height:50rpx; width:50rpx; position: absolute; right: 0rpx; top: 20rpx; }
js代碼
/** * 頁面的初始數(shù)據(jù) */ data: { select:false, grade_name:'--請選擇--', grades: [ '猛犸機(jī)器人1班', '猛犸機(jī)器人2班', '口才1班', ] },/** * 點(diǎn)擊下拉框 */ bindShowMsg() { this.setData({ select: !this.data.select }) }, /** * 已選下拉框 */ mySelect(e) { console.log(e) var name = e.currentTarget.dataset.name this.setData({ grade_name: name, select: false }) },
效果
總結(jié)
以上所述是小編給大家介紹的微信小程序下拉框功能的實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題
下面小編就為大家?guī)硪黄獪\談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問題,以及內(nèi)存分配問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09JS+CSS實(shí)現(xiàn)超漂亮的動態(tài)翻書效果(思路詳解)
我們平常沖浪時是不是看過一些學(xué)校高級的錄取通知書,翻開通知書就能看見里面的內(nèi)容,呈現(xiàn)出逼真的3D效果,本文帶領(lǐng)大家基于JS+CSS實(shí)現(xiàn)超漂亮的動態(tài)翻書效果,需要的朋友可以參考下2023-05-05鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解
這篇文章主要介紹了鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解,需要的朋友可以參考下2015-03-03JavaScript實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間通信
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間通信,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04js實(shí)現(xiàn)的動畫導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)的動畫導(dǎo)航菜單效果代碼,涉及JavaScript通過鼠標(biāo)事件控制頁面元素樣式動態(tài)變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09JS數(shù)組去重常用方法實(shí)例小結(jié)【4種方法】
這篇文章主要介紹了JS數(shù)組去重常用方法,結(jié)合實(shí)例形式總結(jié)分析了4種常用的數(shù)據(jù)去重實(shí)現(xiàn)方法,涉及javascript數(shù)組的遍歷、判斷、追加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05