微信小程序下拉框功能的實例代碼
更新時間：2018年11月06日 15:11:48 作者：下頁、再停留
這篇文章主要介紹了微信小程序下拉框功能的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
微信小程序組件里沒有下拉框，正好要用到，記下來以后參考
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;
}
}
/* 下拉圖標 */
.top-selected image{
height:50rpx;
width:50rpx;
position: absolute;
right: 0rpx;
top: 20rpx;
}
js代碼
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
select:false,
grade_name:'--請選擇--',
grades: [
'猛犸機器人1班',
'猛犸機器人2班',
'口才1班',
]
},/**
* 點擊下拉框
*/
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é)
以上所述是小編給大家介紹的微信小程序下拉框功能的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應用示例解析
這篇文章主要介紹了使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應用示例解析，文章通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單計數(shù)器，有加、減和零三個按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Javascript new關(guān)鍵字的玄機 以及其它
本人是Javascript菜鳥，下面是前幾天學習Javascript的旅程心得，希望對和我一樣的入門者有點用，也希望高手批評指正。2010-08-08
這篇文章主要介紹了JS三級聯(lián)動代碼格式實例詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
在ECMAScript中,變量可以存在兩種類型的值,即原始值和引用,這篇這篇文章主要給大家介紹了關(guān)于ECMAScript中的原始值和引用值的相關(guān)資料,需要的朋友可以參考下2021-08-08
JS實現(xiàn)單張或多張圖片持續(xù)無縫滾動的示例代碼
這篇文章主要介紹了JS實現(xiàn)單張或多張圖片持續(xù)無縫滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
微信小程序?qū)崿F(xiàn)點擊按鈕修改view標簽背景顏色功能示例【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕修改view標簽背景顏色功能,涉及微信小程序事件響應及數(shù)值運算實現(xiàn)動態(tài)設置view背景色樣式的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
uniapp使用navigateBack方法返回上級頁面并刷新的簡單示例
最近寫uniapp項目的時候發(fā)現(xiàn)有時候需要更新頁面數(shù)據(jù),所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用navigateBack方法返回上級頁面并刷新的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
Canvas是HTML5新增元素,用于繪制圖形、動畫等視覺效果,簡單添加Canvas元素和JavaScript即可繪制圖形和文本,包括線條、矩形、圓形等,Canvas優(yōu)勢在于高性能和兼容性,適用于復雜交互效果,需要的朋友可以參考下2024-11-11
本篇文章主要介紹了ES6 Promise 擴展always方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09