本文主要和大家分享微信小程序模擬下拉菜單開發實例，希望能幫助到大家。

一.知識點

1.實現動態顯示和隱藏某個控件

列表1data:{

open:false

},

showitem:function(){

this.setData({

open:!this.data.open

})

},.display_show{

display: block;

}

.display_none{

display: none;

}

2.通過data-*和e.target.dateset傳遞參數

{{firstPerson}}

吃this.setData({

firstPerson:e.target.dataset.me,

})

這時：firstPerson=吃

3.彈性盒字：display:flex;

{{firstPerson}}

在父級：

display:flex;

justify-content:space-between;

這樣子集就會并列。justify-content:space-between;這樣子集就會分別在在倆頭

二.事列

(1).下拉列表

1.wxml

點擊我顯示下拉列表

列表1

列表2

列表3

2.wxss.page_bd{

padding: 10px;

background-color: snow;

}

.body_head{

border: 1px solid;

border-color: beige;

padding: 10px;

}

.display_show{

display: block;

border: 1px solid;

border-color: beige;

padding: 10px;

}

.display_none{

display: none;

}

3.jsPage({

data:{

open:false

},

showitem:function(){

this.setData({

open:!this.data.open

})

},

onLoad:function(options){

// 頁面初始化 options為頁面跳轉所帶來的參數

},

onReady:function(){

// 頁面渲染完成

},

onShow:function(){

// 頁面顯示

},

onHide:function(){

// 頁面隱藏

},

onUnload:function(){

// 頁面關閉

}

})

(2).下拉菜單

1.wxml

{{firstPerson}}

吃

喝

玩

2.wxssphone_personal{

width: 100%;

color:rgb(34, 154, 181);

height:100rpx;

line-height:100rpx;

text-align: center;

}

.phone_one{

display:flex;

position:relative;

justify-content:space-between;

background-color:rgb(239, 239, 239);

width:90%;

height:100rpx;

margin:22px auto;

border-radius:10rpx;

border-bottom:2rpx solid rgb(255, 255, 255);

line-height:51px;

padding-left:10px;

}

.person_box{

position: relative;

}

.phone_select{

margin-top:0;

z-index: 100;

position: absolute;

}

.select_one{

text-align: center;

background-color:rgb(239, 239, 239);

width:676rpx;

height:100rpx;

line-height:100rpx;

margin:0 5%;

border-bottom:2rpx solid rgb(255, 255, 255);

}

.personal_image{

z-index: 100;

position: absolute;

right:2.5%;

width: 34rpx;

height: 20rpx;

margin:40rpx 20rpx 40rpx 0;

transition: All 0.4s ease;

-webkit-transition: All 0.4s ease;

}

.rotateRight{

transform: rotate(180deg);

}

3.jsPage({

data:{

selectPerson:true,

firstPerson:'興趣',

selectArea:false,

},

//點擊選擇類型

clickPerson:function(){

var selectPerson = this.data.selectPerson;

if(selectPerson == true){

this.setData({

selectArea:true,

selectPerson:false,

})

}else{

this.setData({

selectArea:false,

selectPerson:true,

})

}

} ,

//點擊切換

mySelect:function(e){

this.setData({

firstPerson:e.target.dataset.me,

selectPerson:true,

selectArea:false,

})

},

onLoad:function(options){

// 頁面初始化 options為頁面跳轉所帶來的參數

},

onReady:function(){

// 頁面渲染完成

},

onShow:function(){

// 頁面顯示

},

onHide:function(){

// 頁面隱藏

},

onUnload:function(){

// 頁面關閉

}

})

相關推薦：

總結

以上是生活随笔為你收集整理的php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。