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


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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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
easyui的tabs update正确用法分享
2014/03/21 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Javascript - HTML的request类
2007/01/09 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
在vue-cli中组件通信的方法
2017/12/16 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Python中splitlines()方法的使用简介
2015/05/20 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
机械工程及其自动化专业求职信
2014/08/08 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
年会邀请函范文
2015/01/30 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js
关于MySQL中explain工具的使用
2023/05/08 MySQL