大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

微信小程序怎么显示下拉列表功能

小编给大家分享一下微信小程序怎么显示下拉列表功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联公司专注于门头沟企业网站建设,自适应网站建设,商城网站定制开发。门头沟网站建设公司,为门头沟等地区提供建站服务。全流程按需网站建设,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务

具体如下:

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文件


  
    点击我显示下拉列表
    列表1
    列表2
    列表3
  

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;
}

看完了这篇文章,相信你对“微信小程序怎么显示下拉列表功能”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页名称:微信小程序怎么显示下拉列表功能
当前地址:http://dzwzjz.com/article/jpshcs.html
在线咨询
服务热线
服务热线:028-86922220
TOP