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

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

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

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

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

3、源代碼點(diǎn)擊此處本站下載。

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

您可能感興趣的文章:

相關(guān)文章

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