本文主要和大家分享微信小程序模拟下拉菜单开发实例，希望能帮助到大家。
一.知识点
1.实现动态显示和隐藏某个控件
606973d9ff634def542dbb90c18de189列表1de5f4c1163741e920c998275338d29b2
data:{
open:false
},
showitem:function(){
this.setdata({
open:!this.data.open
})
},
.display_show{
display: block;
}
.display_none{
display: none;
}
2.通过 data-* 和 e.target.dateset 传递参数
<view class="phone_personal">{{firstperson}}</view>
<view class="select_one" bindtap="myselect" data-me="吃">吃</view>
this.setdata({
firstperson:e.target.dataset.me,
})
这时：firstperson=吃
3.弹性盒字：display:flex;
<view class="phone_one" bindtap="clickperson">
<view class="phone_personal">{{firstperson}}</view>
<image src="../../image/i.png" class="personal_image {{selectarea ? 'rotateright' :''}}"></image>
</view>
在父级：
display:flex;
justify-content:space-between;
这样子集就会并列。justify-content:space-between;这样子集就会分别在在俩头
二.事列
(1).下拉列表
1.wxml
<view class="page">
<view class="page_bd">
<view class="body_head" bindtap="showitem">点击我显示下拉列表</view>
<navigator url="pages/list/list">
<view class="{{open?'display_show':'display_none'}}">列表1</view>
</navigator>
<navigator url="pages/scroll-view/index">
<view class="{{open?'display_show':'display_none'}}">列表2</view>
</navigator>
<navigator url="pages/scroll-view/index">
<view class="{{open?'display_show':'display_none'}}">列表3</view>
</navigator>
</view>
</view>
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.js
page({
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
<view class="phone_one" bindtap="clickperson">
<view class="phone_personal">{{firstperson}}</view>
<image src="../../image/i.png" class="personal_image {{selectarea ? 'rotateright' :''}}"></image>
</view>
<view class="person_box">
<view class="phone_select" hidden="{{selectperson}}">
<view class="select_one" bindtap="myselect" data-me="吃">吃</view>
<view class="select_one" bindtap="myselect" data-me="喝">喝</view>
<view class="select_one" bindtap="myselect" data-me="玩">玩</view>
</view>
</view>
2.wxss
phone_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.js
page({
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(){
// 页面关闭
}
})
相关推荐：
javascript模拟下拉菜单代码_表单特效
以上就是微信小程序模拟下拉菜单开发实例的详细内容。