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


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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
保送生自荐信范文
2013/10/06 职场文书
学生档案自我鉴定
2013/10/07 职场文书
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
股指期货心得体会
2014/09/10 职场文书
英语教师个人总结
2015/02/09 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS