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


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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
GOJS+VUE实现流程图效果
Dec 01 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
python识别验证码图片实例详解
2020/02/17 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
小学毕业演讲稿
2014/04/25 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
董存瑞观后感
2015/06/11 职场文书
企业宣传稿范文
2015/07/23 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书