小編給大家分享一下微信小程序如何實現(xiàn)顯示下拉列表功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用十多年,服務(wù)更有保障!服務(wù)器租用,成都多線服務(wù)器托管 成都服務(wù)器租用,成都服務(wù)器托管,骨干網(wǎng)絡(luò)帶寬,享受低延遲,高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。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": "腳本之家 下拉列表測試", "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(){ // 頁面關(guān)閉 } })
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; }
以上是“微信小程序如何實現(xiàn)顯示下拉列表功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁題目:微信小程序如何實現(xiàn)顯示下拉列表功能-創(chuàng)新互聯(lián)
文章分享:http://m.rwnh.cn/article48/gehep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、網(wǎng)站設(shè)計公司、網(wǎng)站收錄、定制開發(fā)、品牌網(wǎng)站建設(shè)、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)