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

最新推荐文章于 2025-10-09 14:50:44 发布

原创最新推荐文章于 2025-10-09 14:50:44 发布 · 置顶 · 2.1w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#Web前端 #互联网 #微信小程序 #编程语言

微信小程序开发例子专栏收录该内容

65 篇文章

订阅专栏

本文展示了如何在微信小程序中创建下拉列表，详细介绍了关键的.js、.wxml和.wxss文件代码，并提供了完整的源代码获取途径，通过百度云链接分享。

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