微信小程序顯示下拉列表功能【附源碼下載】

更新時間：2017年12月12日 11:06:31 作者：FutrueJet

這篇文章主要介紹了微信小程序顯示下拉列表功能,涉及微信小程序navigator組件導航及頁面加載相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了微信小程序顯示下拉列表功能。分享給大家供大家參考，具體如下：

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為頁面跳轉(zhuǎn)所帶來的參數(shù)
 },
 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、源代碼點擊此處本站下載。

希望本文所述對大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

Java Varargs 可變參數(shù)用法詳解
在本篇文章里小編給大家整理了關于Java Varargs 可變參數(shù)使用以及相關知識點，需要的朋友們參考下。
2020-01-01
JavaScript每天必學之數(shù)組和對象部分
JavaScript每天必學之數(shù)組和對象部分,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
js實現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領紅包功能
最近支付寶的領紅包可真是刷爆了各個微信群啊，滿群都是支付寶口令,可是這樣推廣很麻煩，下面小編給大家?guī)砹薺s實現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領紅包功能，需要的朋友參考下
2018-01-01
js學使用setTimeout實現(xiàn)輪循動畫
這篇文章主要為大家詳細介紹了js使用setTimeout實現(xiàn)輪循動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
JS注釋所產(chǎn)生的bug 即使注釋也會執(zhí)行
寫js時出現(xiàn)個bug一直提示我JAVA類中的一個屬性沒有，可是明明注釋掉了，后來才知道，JS里即使注釋也會執(zhí)行
2013-11-11
layui復選框的全選與取消實現(xiàn)方法
今天小編就為大家分享一篇layui復選框的全選與取消實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)
這篇文章介紹了JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)，有需要的朋友可以參考一下
2013-08-08
微信小程序云開發(fā)實現(xiàn)分頁刷新獲取數(shù)據(jù)
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)實現(xiàn)分頁刷新獲取數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
html+javascript+bootstrap實現(xiàn)層級多選框全層全選和多選功能
想做一個先按層級排序并可以多選的功能，首先傾向于用多層標簽式的，直接選定加在文本域里，接下來通過本文給大家介紹html+javascript+bootstrap實現(xiàn)層級多選框全層全選和多選功能，需要的朋友參考下
2017-03-03
談談javascript中使用連等賦值操作帶來的問題
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關資料,需要的朋友可以參考下
2015-11-11