微信小程序显示下拉列表功能【附源码下载】


Posted in Javascript onDecember 12, 2017

本文实例讲述了微信小程序显示下拉列表功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序显示下拉列表功能【附源码下载】

2、关键代码

app.json文件:

{
 "pages":[
  "views/views",
  "views/navigators/navigator1/navigator1",
  "views/navigators/navigator2/navigator2",
  "views/navigators/navigator3/navigator3",
  "pages/index/index",
  "pages/logs/logs"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "三水点靠木 下拉列表测试",
  "navigationBarTextStyle":"black"
 }
}

views.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(){
  // 页面关闭
 }
})

views.wxml文件

<view class="page">
  <view class="page_bd">
    <view class="body_head" bindtap="showitem">点击我显示下拉列表</view>
    <navigator url="../views/navigators/navigator1/navigator1"><view class="{{open?'display_show':'display_none'}}">列表1</view></navigator>
    <navigator url="../views/navigators/navigator2/navigator2"><view class="{{open?'display_show':'display_none'}}">列表2</view></navigator>
    <navigator url="../views/navigators/navigator3/navigator3"><view class="{{open?'display_show':'display_none'}}">列表3</view></navigator>
  </view>
</view>

view.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、源代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
webpack external模块的具体使用
Mar 10 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
create-react-app开发常用配置教程
Jun 25 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 #Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 #Javascript
javascript实现循环广告条效果
Dec 12 #Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 #Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 #Javascript
C#实现将一个字符转换为整数
Dec 12 #Javascript
vue2.0 和 animate.css的结合使用
Dec 12 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
php 数组的一个悲剧?
2011/05/11 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
vue3.0 上手体验
2020/09/21 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python K近邻算法的kd树实现
2018/09/06 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
大数据分析用java还是Python
2020/07/06 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
部队党性分析材料
2014/02/16 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
党员承诺书格式
2014/05/21 职场文书
专题组织生活会方案
2014/06/15 职场文书
计划生育标语
2014/06/23 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
海洋天堂观后感
2015/06/05 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python