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

一.知识点

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

<view class="{{open?'display_show':'display_none'}}">列表1</view>

  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>

在父级：

这样子集就会并列。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;  }

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模拟下拉菜单代码_表单特效

以上就是微信小程序模拟下拉菜单开发实例的详细内容，更多内容请关注技术你好其它相关文章！