php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例

本文主要和大家分享微信小程序模拟下拉菜单开发实例，希望能帮助到大家。

一.知识点

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(){

// 页面关闭

}

})

相关推荐：