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

一.知識(shí)點(diǎn)

1.實(shí)現(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件

列表1data:{

open:false

},

showitem:function(){

this.setData({

open:!this.data.open

})

},.display_show{

display: block;

}

.display_none{

display: none;

}

2.通過(guò)data-*和e.target.dateset傳遞參數(shù)

{{firstPerson}}

吃this.setData({

firstPerson:e.target.dataset.me,

})

這時(shí)：firstPerson=吃

3.彈性盒字：display:flex;

{{firstPerson}}

在父級(jí)：

display:flex;

justify-content:space-between;

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

二.事列

(1).下拉列表

1.wxml

點(diǎn)擊我顯示下拉列表

列表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){

// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)

},

onReady:function(){

// 頁(yè)面渲染完成

},

onShow:function(){

// 頁(yè)面顯示

},

onHide:function(){

// 頁(yè)面隱藏

},

onUnload:function(){

// 頁(yè)面關(guān)閉

}

})

(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,

},

//點(diǎn)擊選擇類型

clickPerson:function(){

var selectPerson = this.data.selectPerson;

if(selectPerson == true){

this.setData({

selectArea:true,

selectPerson:false,

})

}else{

this.setData({

selectArea:false,

selectPerson:true,

})

}

} ,

//點(diǎn)擊切換

mySelect:function(e){

this.setData({

firstPerson:e.target.dataset.me,

selectPerson:true,

selectArea:false,

})

},

onLoad:function(options){

// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)

},

onReady:function(){

// 頁(yè)面渲染完成

},

onShow:function(){

// 頁(yè)面顯示

},

onHide:function(){

// 頁(yè)面隱藏

},

onUnload:function(){

// 頁(yè)面關(guān)閉

}

})

相關(guān)推薦：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。