源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-10-02 23:56 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:微信小程序显示下拉列表功能【附源码下载】
本文实例讲述了微信小程序显示下拉列表功能。分享给大家供大家参考,具体如下: [b]1、效果展示[/b] [img]http://files.jb51.net/file_images/article/201712/20171212112153517.gif?20171112112210[/img] [b]2、关键代码[/b] 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;
}

[b]3、源代码[/b]点击此处[url=http://xiazai.jb51.net/201712/yuanma/waxpp_view_boke(jb51.net).rar][b]本站下载[/b][/url]。 希望本文所述对大家微信小程序开发有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部