本篇內(nèi)容主要講解“微信小程序模擬下拉菜單開發(fā)的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序模擬下拉菜單開發(fā)的方法”吧!

成都創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元道里做網(wǎng)站,已為上家服務(wù),為道里各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

一.知識(shí)點(diǎn)

1.實(shí)現(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件

列表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 傳遞參數(shù)

{{firstPerson}}

吃

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

這時(shí)：firstPerson=吃

3.彈性盒字：display:flex;

    {{firstPerson}}
    

在父級(jí)：

   display:flex;
   justify-content:space-between;

這樣子集就會(huì)并列。justify-content:space-between;這樣子集就會(huì)分別在在倆頭

二.事列

(1).下拉列表

1.wxml

    
        點(diǎn)擊我顯示下拉列表
        
        	列表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.js

Page({
  data:{
    open:false
  },
  showitem:function(){
      this.setData({
          open:!this.data.open
      })
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關(guān)閉
  }
})

(2).下拉菜單

1.wxml

    {{firstPerson}}
    


    
        吃
        喝
        玩
    
 

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,
  },
  //點(diǎn)擊選擇類型
  clickPerson:function(){
    var selectPerson = this.data.selectPerson;
    if(selectPerson == true){
        this.setData({
        selectArea:true,
        selectPerson:false,
      })
    }else{
      this.setData({
        selectArea:false,
        selectPerson:true,
      })
    }
  } ,
  //點(diǎn)擊切換
  mySelect:function(e){
    this.setData({
      firstPerson:e.target.dataset.me,
      selectPerson:true,
      selectArea:false,
    })
  },
  onLoad:function(options){
  // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
  // 頁面渲染完成
  },
  onShow:function(){
  // 頁面顯示
  },
  onHide:function(){
  // 頁面隱藏
  },
  onUnload:function(){
  // 頁面關(guān)閉
  }
})

到此，相信大家對(duì)“微信小程序模擬下拉菜單開發(fā)的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！