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

  data:{    open:false  },  showitem:function(){      this.setData({          open:!this.data.open      })  },

.display_show{    display: block;}.display_none{    display: none;}

    this.setData({             firstPerson:e.target.dataset.me,       })

<view>    <view>{{firstPerson}}</view>    <image></image></view>

<view>    <view>        <view>点击我显示下拉列表</view>        <navigator>        	<view>列表1</view>        </navigator>        <navigator>        	<view>列表2</view>        </navigator>        <navigator>        	<view>列表3</view>        </navigator>    </view></view>

.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(){    // 页面关闭  }})

<view>    <view>{{firstPerson}}</view>    <image></image></view>            吃        喝        玩     

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);}

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(){  // 页面关闭  }})