微信小程序模拟下拉菜单开发实例

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

一.知识点

1.实现动态显示和隐藏某个控件

列表1

 data:{
 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;

 view >
在父级：
 display:flex;
 justify-content:space-between;
这样子集就会并列。justify-content:space-between;这样子集就会分别在在俩头
二.事列
(1).下拉列表
1.wxml
 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 >
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: #39;兴趣 #39;,
 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模拟下拉菜单代码_表单特效
以上就是微信小程序模拟下拉菜单开发实例的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！