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

小編給大家分享一下微信小程序怎么顯示下拉列表功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

具體如下：

1、效果展示

2、關(guān)鍵代碼

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": "億速云 下拉列表測(cè)試",
  "navigationBarTextStyle":"black"
 }
}

views.js文件

Page({
 data:{
  // text:"這是一個(gè)頁(yè)面"
  open:false
 },
 showitem:function(){
   this.setData({
     open:!this.data.open
   })
 },
 onLoad:function(options){
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
 },
 onReady:function(){
  // 頁(yè)面渲染完成
 },
 onShow:function(){
  // 頁(yè)面顯示
 },
 onHide:function(){
  // 頁(yè)面隱藏
 },
 onUnload:function(){
  // 頁(yè)面關(guān)閉
 }
})

views.wxml文件

<view class="page">
  <view class="page_bd">
    <view class="body_head" bindtap="showitem">點(diǎn)擊我顯示下拉列表</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;
}

看完了這篇文章，相信你對(duì)“微信小程序怎么顯示下拉列表功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！