微信小程序示例-下拉菜单

github地址：https://github.com/itwhy1994/wechat-miniprogram/tree/master/DropdownMenu

使用方法非常简单，只需修改js代码中的strFunctionChooses数组以及bindtapList: function (e)函数即可

效果如图所示

代码

wxml

  
    Function 1 show
  

  
    Function 2 show
  

  
    Function 3 show
  

  
  

wxss

.viewListItem{
    padding: 50rpx;
    display: flex; 
    align-items: center;
    transition: opacity .3s;
    border-bottom-style: solid;
    border-bottom-width: 10rpx;
    border-bottom-color: rgb(0, 0, 0);
    background-color: white;
}
  
.viewListItemShow{
    opacity: .2;
}
  
.textListItem{
    flex: 1;
    font-size: 38rpx;
}

js

如需使用，只需修改strFunctionChooses数组以及bindtapList: function (e)函数即可

Page({
  /**
   * 页面的初始数据
   */
  data: {
    strFunctionChooses: ["功能1", "功能2", "功能3"],
    iFunctionChoose: 0,
  },

  bindtapList: function (e) {
    var idTap = parseInt(e.currentTarget.id)
    if (this.data.iFunctionChoose == idTap) {
      this.setData({
        iFunctionChoose: 0
      })
    }
    else {
      this.setData({
        iFunctionChoose: idTap
      })

      if (idTap == 1) {
        // what you want when tap function 1
      }
      else if (idTap == 2) {
        // what you want when tap function 2
      }
      else if (idTap == 3) {
        // what you want when tap function 3
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
})