微信小程序 下拉菜單

微信小程序  下拉菜單

效果：

1.wxml

<!-- 下拉菜單 -->
 <view id="swiper-tab">
 <view class="swiper-tab">
  <view class="swiper-tab-list  {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">{{first}}
  <i></i>
  </view>
  <view class="swiper-tab-list   {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">{{seond}}
  <i></i>
  </view>
  <view class="swiper-tab-list  {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav">{{thrds}}
  <i></i>
  </view>
 </view>
 <swiper current="{{currentTab}}" duration="1000" class="swiper-item" style='display:{{displays}}'>
  <swiper-item>
  <view class="location_bottom" hidden="">
   <view class="{{_num == 1?'add_citying':'add_city'}}" data-num="1" bindtap="clickNum" data-name="智能排序">智能排序</view>
   <view class="{{_num == 2?'add_citying':'add_city'}}" data-num="2" bindtap="clickNum" data-name="離我最近">離我最近</view>
   <view class="{{_num == 3?'add_citying':'add_city'}}" data-num="3" bindtap="clickNum" data-name="好評優先">好評優先</view>
   <view class="{{_num == 4?'add_citying':'add_city'}}" data-num="4" bindtap="clickNum" data-name="離我最近">離我最近</view>
  </view>
  </swiper-item>
  <swiper-item>
  <view class="location_bottom" hidden="">
   <view class="{{_res == 1?'add_House':'add_city'}}" data-num="1" bindtap="clickHouse" data-name="智能排序">智能排序</view>
   <view class="{{_res == 2?'add_House':'add_city'}}" data-num="2" bindtap="clickHouse" data-name="離我最近">離我最近</view>
   <view class="{{_res == 3?'add_House':'add_city'}}" data-num="3" bindtap="clickHouse" data-name="好評優先">好評優先</view>
   <view class="{{_res == 4?'add_House':'add_city'}}" data-num="4" bindtap="clickHouse" data-name="離我最近">離我最近</view>
  </view>
  </swiper-item>
  <swiper-item class="shaixuankuang">
  <view class="shaixuan">
   <span class="shuaixuantiaojian">用餐人數</span>
   <block wx:for="{{array}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="choseTxtColor" style="{{index == one?' border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
  <view class="shaixuan">
   <span class="shuaixuantiaojian">餐廳服務</span>
   <block wx:for="{{chaoxiang}}" wx:key="key">
   <view class="chose-txt" data-id="{{index}}" bindtap="chaoxiang" style="{{index == two?'border:1rpx solid #e8580c; color: #e8580c':'border:1rpx solid gainsboro;color:gray'}}">
    <text class="chose-p">{{item.name}}</text>
   </view>
   </block>
  </view>
  <view class="qingkong">
   <span class="tianjian" bindtap="qingchu">清除條件</span>
   <p class="queren" bindtap="queren">確認</p>
  </view>
  </swiper-item>
 </swiper>
 </view>
 <view class="swiper-beijing" bindtap="hideNav" style='display:{{displays}}'></view>
<!-- 下拉菜單結束 -->

2.css

/*下拉菜單開始*/
#swiper-tab {
 width: 100%;
 position: relative;
}
.swiper-tab {
 width: 100%;
 text-align: center;
 line-height: 80rpx;
 background-color: white;

}
.lista{
   width: 235rpx;
   right: 65rpx;
}
.listb{
width:150rpx;
left: 55rpx;
}
.listc{
width:150rpx;
right: 90rpx;
}
.swiper-tab-list {
 font-size: 30rpx;
 display: inline-block;
 color: #666;
 border-bottom: 0rpx;
 position: relative;
 width: 33%;
}
.swiper-tab-list i {
 position: absolute;
 bottom: 30%;
 right: 10%;
 width: 0px;
 height: 0px;
 border: 5px solid rgb(182, 186, 195);
 border-top-color: rgb(182, 186, 195);
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-right-color: transparent;
}
.on {
 color: #f63;
 /* border-bottom: 2rpx solid #f63; */
}
.on i {
 border: 5px solid #f63;
 border-top-color: #f63;
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-right-color: transparent;
}
.swiper-box {
 display: block;
 height: 100%;
 width: 100%;
 overflow: hidden;
}
.swiper-box view {
 text-align: center;
}
.swiper-item {
 background: #fff;
 width: 100%;
 height: 360rpx;
 display: none;
 position: absolute;
 /* top: 100rpx; */
 z-index: 333333;
 left: 0;
 animation: displays 1s;
}
@keyframes displays {
 from {
 height: 0px;
 }
 to {
 height: 360rpx;
 }
}
.swiper-beijing {
 width: 100%;
 height:100%;
 background: #000;
 opacity: 0.5;
 position: absolute;
 /* top: 130px; */
 left: 0;
 display: none;
 z-index: 888;
 animation: 1s;
}
/* 下拉切換中的切換 */
.nav {
 width: 20%;
 height: 100rpx;
 float: left;
 flex-direction: row;
}
.default {
 width: 100%;
 line-height: 100rpx;
 text-align: center;
 color: #000;
 font-weight: bold;
 font-size: 28rpx;
 overflow: hidden;
}
.red {
 width: 100%;
 float: right;
 line-height: 100rpx;
 text-align: center;
 color: #f63;
 font-weight: bold;
 font-size: 28rpx;
}
.show {
 display: block;
 text-align: center;
 line-height: 200rpx;
}
.hidden {
 display: none;
 text-align: center;
 line-height: 200px;
}
#rights {
 width: 79%;
 float: right;
 border-left: solid 1px #eee;
 font-size: 15px;
 max-height: 600rpx;
 overflow-y: auto;
 overflow-x: hidden;
}
/*添加class改變樣式 */
.location_bottom {
 width: 100%;
 height: 400rpx;
 line-height: 140rpx;
 color: #d91f16;
 font-size: 28rpx;
 padding: 0 20rpx;
 align-items: center;
}
.add_city {
 width: 90%;
 display: block;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #ebebeb;
 color: #000;
 padding-left: 5%;
}
.add_adress {
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
.add_adre {
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
.add_citying {
 padding-left: 5%;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
.add_House {
 padding-left: 5%;
 height: 70rpx;
 line-height: 70rpx;
 border-bottom: 2rpx solid #f63;
 color: #f63;
}
/*// 篩選 */
.shaixuankuang {
 width: 100%;
 height: 600rpx;
 overflow: hidden;
 max-height: 600rpx;
 overflow-y: auto;
 overflow-x: hidden;
}
.shaixuan {
 width: 100%;
 height: auto;
 overflow: hidden;
}
.shuaixuantiaojian {
 width: 95%;
 padding: 0 2.5% 1%;
 display: block;
 font-size: 30rpx;
 color: #999;
}
.chose-txt {
 /* border-radius: 6px; */
 font-size: 26rpx;
 width: 29%;
 margin: 4px 14rpx;
 float: left;
}
.chose-p {
 line-height: 25px;
 width: 100%;
 height: 25px;
 text-align: center;
 float: left;
}
.zidingyi {
 width: 95%;
 height: 50px;
 margin: 0 auto;
 overflow: hidden;
}
.zidingyi span {
 float: left;
 font-size: 16px;
 line-height: 40px;
 color: #666;
 margin-right: 15rpx;
}
.zidingyi input {
 width: 50px;
 padding-left: 10rpx;
 float: left;
 margin-top: 10rpx;
 font-size: 15px;
 line-height: 40px;
 border: solid 1px #eee;
 color: #666;
}
.zidingyi p {
 float: left;
 margin: 0 15rpx;
 line-height: 40px;
 color: #666;
}
.zidingyi button {
 height: 28px;
 float: left;
 margin: 10rpx 0 0 25rpx;
 font-size: 13px;
 line-height: 28px;
 /* border: solid 1px #eee; */
 color: #666;
}
.qingkong {
 width: 95%;
 height: 40px;
 margin: 40rpx auto 30rpx;
}
.qingkong span {
 float: left;
 width: 35%;
 height: 33px;
 border: 1px solid #eee;
 box-sizing: border-box;
 color: #666;
 font-size: 14px;
 font-weight: 300;
 text-align: center;
 line-height: 33px;
 border-radius: 3px;
}
.qingkong p{
 float: right;
 width: 55%;
 height: 35px;
 color: #fff;
 font-size: 14px;
 font-weight: 300;
 text-align: center;
 line-height: 35px;
 background: rgba(229,65,65,0.95);
 border-radius: 3px;
}
/* 下拉菜單結束 */

3.js

//下拉菜單獲取應用實例

var a = -1;
var b = -1;
var c = -1;
var d = -1;
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    
    // 下拉菜單
    first: '分類',
    seond: '智能排序',
    thrds: '篩選',
    _num: 0,
    _res: 0,
    // 篩選
    array: [{ name: '1-2用餐' }, { name: '2-4用餐' }, { name: '4-6用餐' }, { name: '6-8用餐' }],
    chaoxiang: [{ name: '買單' }, { name: '外賣送餐' }, { name: '訂座' }, { name: '在線排隊' }],
    one: 0,
    two: 0,

  },
  isShow: true,
  currentTab: 0,
  // 下拉切換
  hideNav: function () {
    this.setData({
      displays: "none"
    })
  },
  tabNav: function (e) {
    this.setData({
      displays: "block"
    })
    // this.setData({
    //   selected1: false,
    //   selected2: false,
    //   selected: true
    // })
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {

      var showMode = e.target.dataset.current == 0;

      this.setData({
        currentTab: e.target.dataset.current,
        isShow: showMode
      })
    }
  },
  // 下拉切換中的切換

  // 分類
  clickNum: function (e) {
    console.log(e.target.dataset.num)
    this.setData({
      _num: e.target.dataset.num
    })
    this.setData({
      second: e.target.dataset.name
    })
    this.setData({
      displays: "none"
    })
    var text = this.data.name
    console.log(text)
  },
  onLoad: function (options) {

  },
  // 排序
  clickHouse: function (e) {
    console.log(e.target.dataset.num)
    this.setData({
      _res: e.target.dataset.num
    })
    this.setData({
      thirds: e.target.dataset.name
    })
    this.setData({
      displays: "none"
    })
  },
  onLoad: function (options) {

  },

  // 篩選
  choseTxtColor: function (e) {
    var id = e.currentTarget.dataset.id; //獲取自定義的ID值 
    console.log(e.currentTarget.dataset.id)
    this.setData({
      one: id
    })
  },
  chaoxiang: function (e) {
    var id = e.currentTarget.dataset.id; //獲取自定義的ID值 
    this.setData({
      two: id
    })
  },


  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    app.editTabBar();
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})