介紹
多級(jí)聯(lián)動(dòng)菜單在許多的篩選場(chǎng)景應(yīng)用十分廣泛。
動(dòng)手操作
先看看效果圖：
menu_full.gif
-
總體布局
總體布局.png
menu.wxml
<view class="menu">
<!-- 菜單導(dǎo)航 -->
<view class="menu_navi">
<view class="menu_navi_item" >
<text>游戲</text>
</view>
<view class="menu_navi_item">
<text>體育</text>
</view>
<view class="menu_navi_item">
<text>電影</text>
</view>
</view>
<!-- 某個(gè)菜單的內(nèi)容 -->
<view class="menu_content">
<view class="menu_one">
<scroll-view class="left">
<view class="left_item">左邊</view>
</scroll-view>
<scroll-view class="right">
<view class="right_item">右邊</view>
</scroll-view>
</view>
<view class="menu_two" wx:if="{{menu_two_show}}">
<scroll-view class="left">
<view class="left_item">左邊</view>
</scroll-view>
<scroll-view class="right">
<view class="right_item">右邊</view>
</scroll-view>
</view>
<view class="menu_three" wx:if="{{menu_three_show}}">
<scroll-view class="left">
<view class="left_item">左邊</view>
</scroll-view>
<scroll-view class="right">
<view class="right_item">右邊</view>
</scroll-view>
</view>
<!-- 陰影部分 -->
<view class="surplus"></view>
menu.wxss
.menu{
position: fixed; /*固定位置*/
top: 0rpx;
left: 0rpx;
width: 100%;
display: flex;
flex-direction: column;
}
-
分模塊進(jìn)行開(kāi)發(fā)
1、菜單導(dǎo)航
menu.jsp
<!--菜單導(dǎo)航-->
<view class="menu_navi">
<view class="menu_navi_item {{ menu_one_show ? 'menu_select':''}}" bindtap="menuOne" >
<text>游戲</text>
<icon class="iconfont {{ menu_one_show ? 'icon-unfold':'icon-fold'}}"></icon>
</view>
<view class="menu_navi_item {{ menu_two_show ? 'menu_select':''}}" bindtap="menuTwo">
<text>體育</text>
<icon class="iconfont {{ menu_two_show ? 'icon-unfold':'icon-fold'}}"></icon>
</view>
<view class="menu_navi_item {{ menu_three_show ? 'menu_select':''}}" bindtap="menuThree">
<text>電影</text>
<icon class="iconfont {{ menu_three_show ? 'icon-unfold':'icon-fold'}}"></icon>
</view>
</view>
menu.wxss
.menu_navi{
display: flex;
flex-direction: row;
width: 100%;
}
.menu_navi_item{
display: flex;
flex-direction: row;
justify-content: center; /*主軸居中 水平*/
align-items: center; /*側(cè)軸居中 垂直*/
border: 1rpx solid #DCDCDC;
font-size: 30rpx;
width: 35%;
height: 80rpx;
}
/*菜單導(dǎo)航欄選中時(shí)，出現(xiàn)此樣式*/
.menu_select{
color: brown;
background-color: springgreen;
}
menu.js
Page({
data: {
//游戲、體育、電影的顯示與隱藏控制參數(shù)
menu_one_show: false, //控制菜單一的內(nèi)容
menu_two_show: false, //控制菜單二的內(nèi)容
menu_three_show: false, //控制菜單三的內(nèi)容
},
/**
* 選項(xiàng)卡的控制
*/
//控制選項(xiàng)一
menuOne: function () {
var that = this;
if (that.data.menu_one_show) { //說(shuō)明menu_one_show現(xiàn)在展開(kāi)屿讽，需要關(guān)閉
that.setData({
menu_one_show: false,
menu_two_show: false,
menu_three_show: false,
})
} else {
that.setData({
menu_one_show: true,
menu_two_show: false,
menu_three_show: false,
select_left: select_left, //打開(kāi)菜單的時(shí)候，默認(rèn)選中的內(nèi)容
select_left_content: that.data.menu_one_data[select_left],
select_right: '',
})
}
},
//控制選項(xiàng)二
menuTwo: function () {
var that = this;
if (that.data.menu_two_show) {
that.setData({
menu_one_show: false,
menu_two_show: false,
menu_three_show: false,
});
} else {
for (var select_top in that.data.menu_two_data) break; //第二個(gè)菜單欄的上部默認(rèn)選中第一個(gè)吠裆，獲得的是json的key值
var select_top_content = that.data.menu_two_data[select_top]; //默認(rèn)選中第一個(gè)后的內(nèi)容伐谈，提供下面進(jìn)行使用
for (var select_left in select_top_content) break; //使用上面的內(nèi)容，左邊默認(rèn)選中的第一個(gè)试疙，而且也是獲得它的key值诵棵，
var select_top_content = select_top_content[select_left]; //默認(rèn)選中左邊的時(shí)候，右邊的內(nèi)容進(jìn)行顯示祝旷。
that.setData({
menu_one_show: false,
menu_two_show: true,
menu_three_show: false,
select_top: select_top, //上方默認(rèn)選擇
select_top_content: that.data.menu_two_data[select_top], //選中上方之后履澳，下方的內(nèi)容
select_left: select_left, //左邊的默認(rèn)選擇
select_left_content: select_top_content, //選中左邊之后的，右邊的內(nèi)容
});
}
},
//控制選項(xiàng)三
menuThree: function () {
var that = this;
if (that.data.menu_three_show) {
that.setData({
menu_one_show: false,
menu_two_show: false,
menu_three_show: false,
})
} else {
that.setData({
menu_one_show: false,
menu_two_show: false,
menu_three_show: true,
select_left: select_left, //同游戲那個(gè)菜單
select_left_content: that.data.menu_three_data[select_left],
select_right: '',
})
}
},
2怀跛、多余部分
menu.wxml
<!-- 陰影部分 -->
<view class="surplus" wx:if="{{(menu_one_show)||(menu_two_show)||(menu_three_show)}}" bindtap="menuFlod"></view>
menu.wxss
.menu .surplus{
width: 100%;
height: 500rpx;
background-color: grey;
opacity: 0.8;
}
menu.js
// 點(diǎn)擊陰影部分距贷，菜單隱藏
menuFlod: function () {
var that = this;
that.setData({
menu_one_show: false,
menu_two_show: false,
menu_three_show: false,
})
},
4、具體菜單內(nèi)容
這里主要針對(duì)一個(gè)菜單欄進(jìn)行詳細(xì)講解吻谋，其余兩個(gè)原理相同忠蝗。
游戲
menu.wxml
<!-- 選項(xiàng)一 -->
<view class="menu_content">
<view class="menu_one" wx:if="{{menu_one_show}}">
<scroll-view class="left" scroll-y="true">
<view class="left_item {{select_left == key? 'select_left':''}} " wx:for="{{menu_one_data}}" wx:for-index="key" data-index="{{key}}" data-navi="1" wx:key="{{key}}" bindtap="selectLeft">
<text>{{key}}</text>
</view>
</scroll-view>
<scroll-view class="right" scroll-y="true">
<view class="right_item {{select_right == item? 'select_right':''}}" wx:for="{{select_left_content}}" data-index="{{item}}" wx:key="{{item}}" bindtap="selectRight">
<text>{{item}}</text>
</view>
</scroll-view>
</view>
</view>
這里推薦大家使用<scroll-view></scroll-view>組件，這樣超過(guò)限定的高度的話漓拾，就可以在內(nèi)部產(chǎn)生滾動(dòng)條阁最，整體布局不會(huì)亂。使用<scroll></scroll>組件的時(shí)候晦攒，記得要開(kāi)啟滾動(dòng)的方向（scroll-y表示縱向闽撤，scroll-x表示橫向）得哆，這些屬性默認(rèn)是關(guān)閉的脯颜。
menu.wxss
.menu_content{
width: 97.3%;
margin: 10rpx;
background-color: white;
}
.menu_one{
display: flex;
flex-direction: row;
width: 100%;
height: 600rpx;
}
..menu_one .left{
display: flex;
flex-direction: column;
width: 50%;
}
.menu_one .left .left_item{
padding: 15rpx;
line-height: 60rpx; /*設(shè)置成line-height自動(dòng)垂直居中*/
}
.menu_one .left .select_left{
color: rgb(235, 79, 79);
background-color: #DCDCDC;
}
.menu_one .right{
display: flex;
flex-direction: column;
width: 50%;
}
.menu_one .right .right_item{
padding: 15rpx;
line-height: 55rpx;
background-color: #DCDCDC;
}
.menu_one .right .select_right{
color: rgb(235, 79, 79);
}
注意：使用豎向滾動(dòng)時(shí)，需要給<scroll-view/>一個(gè)固定高度贩据，通過(guò) WXSS 設(shè)置 height栋操。
menu.js
data: {
menu_one_data: {
"熱門": ['冒險(xiǎn)島', '戀愛(ài)', '泡泡堂', '僵尸', '哆啦A夢(mèng)', '海綿寶寶', '喜羊羊與灰太狼', '經(jīng)營(yíng)', '射擊', '坦克', '合金彈頭', '棋牌', '巧虎', '斗地主', '麻將', '女生' ,'拳皇', '森林冰火人'],
"益智": ['連連看', 'TD防守', '無(wú)敵連連看', '找茬', '模擬城市', '接水管', '斗地主', 'Nitrome', '對(duì)對(duì)碰', '華容道', '喜洋洋與灰太狼', '泡泡堂', '尋找小白人', '俄羅斯方塊'],
"冒險(xiǎn)": ['乖乖豬世界', '靈動(dòng)', '男生', '魔域', '智能火柴人', '武林外傳', '小王子冒險(xiǎn)島', '外星人大冒險(xiǎn)', '神刀傳奇', '小小冒險(xiǎn)島', '肥貓?zhí)焓?, '黑暗僵尸倉(cāng)庫(kù)', '救人', '蜘蛛俠'],
"戰(zhàn)爭(zhēng)": ['黑暗基地', '戰(zhàn)爭(zhēng)', '柏林飛機(jī)戰(zhàn)爭(zhēng)', '魔獸戰(zhàn)爭(zhēng)', '射擊', '史詩(shī)幻想戰(zhàn)役', '第一次世界大戰(zhàn)', '合金彈頭系列', '忍者與海盜', '火柴人戰(zhàn)爭(zhēng)', '冒險(xiǎn)王', '午夜僵尸大戰(zhàn)', '金剛狼'],
"動(dòng)作": ['變態(tài)版', '松鼠大決戰(zhàn)', '李小龍', '中國(guó)功夫', '明星大亂斗', '瘋狂獨(dú)輪車大戰(zhàn)', '海綿寶寶空手道', '兔子殺戮', '拳皇wing', '悟空格斗', '火影忍者大亂斗', '泰拳小子'],
"敏捷": ['小鳥(niǎo)', '神奇小妖怪相關(guān)', '冒險(xiǎn)', '死神', '祖瑪', '暴力拆除', '洛克人', '索尼克', '森林冰火人', '植物大戰(zhàn)僵尸相關(guān)', '模擬世界', '冒險(xiǎn)島', '黃金礦工', '動(dòng)作', '三國(guó)'],
"女生": ['化妝', '換裝', '打扮', '寶貝', '發(fā)型設(shè)計(jì)', '芭比娃娃', '明星' ,'愛(ài)情測(cè)試', '甜心姐妹美發(fā)', '婚禮婚紗', '精靈換裝', '戀愛(ài)', '禮服' ,'可愛(ài)', '模擬世界', '開(kāi)店經(jīng)營(yíng)' ,'設(shè)計(jì)布置', '美女'],
"專輯": ['動(dòng)漫', '游戲', '哆啦A夢(mèng)', '冒險(xiǎn)島系列', '虹貓藍(lán)兔', '火影忍者' ,'少年駭客', '蠟筆小新', '史酷比系列', '蝙蝠俠', '降世神通Avatar', '海賊王系列' ,'拼圖' ,'兒童', '西游記', '洛克人']
},
menu_three_data:{
"喜劇": ['憨豆先生精選輯', '美麗人生', '福爾摩斯二世', '順其自然', '摩登時(shí)代', '城市之光', '三傻大鬧寶萊塢', '瘋狂動(dòng)物城', '大話西游', '尋子遇仙記', '淘金記'],
"愛(ài)情": ['霸王別姬', '阿甘正傳', '美麗人生', '泰坦尼克號(hào)', '巴黎圣母院', '羅密歐與朱麗葉', '我愛(ài)你', '斷背山', '請(qǐng)以你的名字呼喚我', '幸福終點(diǎn)站'],
"科幻": ['盜夢(mèng)空間', '星際穿越', '虛幻勇士', '蝙蝠俠：黑暗騎士', '楚門的世界', 'V字仇殺隊(duì)', '黑客帝國(guó)', '蝴蝶效應(yīng)', '人工智能'],
"紀(jì)錄片": ['人生果實(shí)', '人生七年', '從納粹手中救出的孩子們', '克拉瑪依'],
"家庭": ['東京物語(yǔ)', '燦爛人生', '摔跤吧！爸爸', '我的父親饱亮，我的兒子', '地上的星星', '大魚(yú)', '金色池塘', '歲月神偷'],
"戰(zhàn)爭(zhēng)": ['辛德勒的名單', '戰(zhàn)爭(zhēng)與和平3', '鬼子來(lái)了', '沉靜如海', '革命往事', '法國(guó)大革命', '拯救大兵瑞恩', '勇敢的心', '亂'],
},
select_left: '', //默認(rèn)選中左邊框的內(nèi)容 (選中哪一項(xiàng))
select_left_content:[], //選中左邊框--->右邊框的內(nèi)容
select_right: '', //默認(rèn)選中右邊框邊框的內(nèi)容 (選中哪一項(xiàng))
},
/**
* 點(diǎn)擊左邊框
*/
selectLeft: function (e) {
var that = this;
var select_left = e.currentTarget.dataset.index; //從wxml中傳過(guò)來(lái)的數(shù)據(jù)矾芙，表示選中那個(gè)key
var select_left_content = []; //準(zhǔn)備接收右邊的內(nèi)容
// 判斷是哪個(gè)菜單欄
if ('1' == e.currentTarget.dataset.navi){
select_left_content = that.data.menu_one_data[select_left];
} else if ('2' == e.currentTarget.dataset.navi){
select_left_content = that.data.select_top_content[select_left];
} else {
select_left_content = that.data.menu_three_data[select_left];
}
console.log(select_left_content);
that.setData({
select_left: select_left,
select_left_content: select_left_content,
select_right: '',
})
},
/**
* 點(diǎn)擊右邊框
*/
selectRight: function(e){
var that = this;
var select_right = e.currentTarget.dataset.index;
that.setData({
select_right: select_right
})
},
menu.js部分主要的難點(diǎn)就是wxml和js之間的數(shù)據(jù)交互，這里很容易弄暈近上，尤其是對(duì)自己定義的變量弄清楚是什么意思剔宪。在這里小編畫(huà)了一個(gè)示意圖來(lái)講解這個(gè)難點(diǎn)。
菜單中的控制顯示
最后給大家提供該項(xiàng)目的github項(xiàng)目，直接抓下來(lái)就可以打開(kāi)使用葱绒，只需對(duì)顯示的數(shù)據(jù)進(jìn)行修改即可感帅。
