微信小程序 下拉菜單
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、大邑縣網(wǎng)絡(luò)推廣、微信小程序、大邑縣網(wǎng)絡(luò)營銷、大邑縣企業(yè)策劃、大邑縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供大邑縣建站搭建服務(wù),24小時(shí)服務(wù)熱線:18982081108,官方網(wǎng)址:bm7419.com
看下實(shí)現(xiàn)效果圖:
實(shí)例:
//wcss /**DropDownMenu**/ /*總菜單容器*/ .menu { display: block; height: 28px; position: relative; } /*一級菜單*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; text-align: center; background-color: #f4f4f4; color: #5a5a5a; line-height: 38px; z-index: 2; } /*二級菜單外部容器樣式*/ .menu dd { position: absolute; width: 100%; margin-top: 40px; left: 0; z-index: -99; } /*二級菜單普通樣式*/ .menu li { font-size: 14px; line-height: 34px; color: #575757; height: 34px; display: block; padding-left: 8px; background-color: #fff; border-bottom: 1px solid #dbdbdb; } /*二級菜單高亮樣式*/ .menu li.highlight { background-color: #f4f4f4; color: #48c23d; } /* 顯示與隱藏 */ .show { /*display: block;*/ visibility: visible; } .hidden { /*display: none;*/ visibility: hidden; }
//wxml <dl class="menu"> <block wx:for="{{reportData}}" wx:key="idMenu" wx:for-item="menuItem" wx:for-index="idMenu"> <dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt> <dd class="{{subMenuDisplay[idMenu]}}" animation="{{animationData[idMenu]}}"> <ul wx:for="{{menuItem.chilItem}}" wx:key="chilItem.ID" wx:for-item="chilItem" wx:for-index="idChil"> <li class="{{subMenuHighLight[idMenu][idChil]}}" bindtap="tapSubMenu" data-index="{{idMenu}}-{{idChil}}">{{chilItem.Name}}</li> </ul> <picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12"> 時(shí)間:{{dateValue}}</picker> </dd> </block> </dl>
JS 代碼:
//js //數(shù)據(jù)源 var ReportDataSync = [ { reportType: "日報(bào)1", chilItem: [ { ID: 1, Name: "日報(bào)1", ReportUrl: "DailyReport.aspx", Type: 1 }, { ID: 2, Name: "日報(bào)2", ReportUrl: "DailyReport.aspx", Type: 1 }, { ID: 3, Name: "日報(bào)3", ReportUrl: "DailyReport.aspx", Type: 1 }] }, { reportType: "目錄2", chilItem: [ { ID: 1, Name: "目錄1", ReportUrl: "DailyReport.aspx", Type: 2 }, { ID: 2, Name: "目錄2", ReportUrl: "DailyReport.aspx", Type: 2 }, { ID: 3, Name: "目錄3", ReportUrl: "DailyReport.aspx", Type: 2 }, { ID: 4, Name: "目錄4", ReportUrl: "DailyReport.aspx", Type: 2 }] }, { reportType: "月報(bào)3", chilItem: [ { ID: 1, Name: "月報(bào)1", ReportUrl: "DailyReport.aspx", Type: 1 }, { ID: 2, Name: "月報(bào)2", ReportUrl: "DailyReport.aspx", Type: 2 }] } ] //定義字段 var initSubMenuDisplay = [] var initSubMenuHighLight = [] /// 初始化DropDownMenu loadDropDownMenu() that.setData({ reportData: ReportDataSync,//菜單數(shù)據(jù) subMenuDisplay: initSubMenuDisplay, //一級 subMenuHighLight: initSubMenuHighLight //二級 }) //一級菜單點(diǎn)擊 tapMainMenu: function (e) { //獲取當(dāng)前一級菜單標(biāo)識 var index = parseInt(e.currentTarget.dataset.index); //改變顯示狀態(tài) for (var i = 0; i < initSubMenuDisplay.length; i++) { if (i == index) { if (this.data.subMenuDisplay[index] == "show") { initSubMenuDisplay[index] = 'hidden' } else { initSubMenuDisplay[index] = 'show' } } else { initSubMenuDisplay[i] = 'hidden' } } this.setData({ subMenuDisplay: initSubMenuDisplay }) }, //二級菜單點(diǎn)擊 tapSubMenu: function (e) { //隱藏所有一級菜單 //this.setData({ //subMenuDisplay: initSubMenuDisplay() //}); // 當(dāng)前二級菜單的標(biāo)識 var indexArray = e.currentTarget.dataset.index.split('-'); // 刪除所在二級菜單樣式 for (var i = 0; i < initSubMenuHighLight.length; i++) { if (indexArray[0] == i) { for (var j = 0; j < initSubMenuHighLight[i].length; j++) { initSubMenuHighLight[i][j] = ''; } } } //給當(dāng)前二級菜單添加樣式 initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight'; //刷新樣式 this.setData({ subMenuHighLight: initSubMenuHighLight }); } /// <summary> /// 初始化DropDownMenu /// 1.一級目錄 initSubMenuDisplay :['hidden'] /// 2.二級目錄 initSubMenuHighLight :[['',''],['','','','']]] /// </summary> function loadDropDownMenu() { for (var i = 0; i < ReportDataSync.length; i++) { //一級目錄 initSubMenuDisplay.push('hidden') //二級目錄 var report = [] for (var j = 0; j < ReportDataSync[i].chilItem.length; j++) { report.push(['']) } initSubMenuHighLight.push(report) } }
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
網(wǎng)站標(biāo)題:微信小程序下拉菜單的實(shí)現(xiàn)
網(wǎng)頁URL:http://bm7419.com/article12/pcgegc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、靜態(tài)網(wǎng)站、定制開發(fā)、標(biāo)簽優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)