微信小程序例子——下拉列表

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/FutrueJet/article/details/52740684

1、效果展示

2、关键代码

.js文件

Page({
  data:{
    // text:"这是一个页面"
    open:false
  },
  showitem:function(){
      this.setData({
          open:!this.data.open
      })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

.wxml文件

点击我显示下拉列表列表1列表2列表3

.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、源代码获取方式

【百度云】链接：http://pan.baidu.com/s/1c87hEm 密码：rd3g