深圳小程序制作公司提醒全部分類導(dǎo)航界面集合了中國(guó)婚博會(huì)所有的導(dǎo)航入口，它可以分為3類導(dǎo)航：玩轉(zhuǎn)婚博會(huì)導(dǎo)航，有訂喜宴、拍婚照、找婚慶等服務(wù)；特色分類導(dǎo)航，有拍寫真、美新娘等服務(wù)；我的婚博會(huì)導(dǎo)航，有現(xiàn)金券、邀請(qǐng)函、簽到禮等服務(wù)。這3類導(dǎo)航布局方式一樣，可以先設(shè)計(jì)一類導(dǎo)航，然后直接進(jìn)行復(fù)用，如圖8.22所示。
圖8.22全部分類界面
（1）進(jìn)入到pages/index/type.wxml文件里，先來設(shè)計(jì)玩轉(zhuǎn)婚博會(huì)這一類導(dǎo)航，具體代碼如下所示：
<viewclass="content"><viewclass="line"></view><viewclass="item"><viewclass="title">玩轉(zhuǎn)婚博會(huì)</view><viewclass="hr"></view><viewclass="navs"><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/dxy.jpg"style="width:38px;height:38px;"></image></view><view>訂喜宴</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/phz.jpg"style="width:38px;height:38px;"></image></view><view>拍婚照</view></view><viewclass="nav"><view><imagesrc="../../src="../../images/type/wzhbh/zhq.jpg"style="width:38px;height:38px;"></image></view><view>找婚慶</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/dhj.jpg"style="width:38px;height:38px;"></image></view><view>訂婚戒</view></view></view><viewclass="navs"><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/xhs.jpg"style="width:38px;height:38px;"></image></view><view>選婚紗</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/thp.jpg"style="width:38px;height:38px;"></image></view><view>淘婚品</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/dmy.jpg"style="width:38px;height:38px;"></image></view><view>度蜜月</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/zhc.jpg"style="width:38px;height:38px;"></image></view><view>租婚車</view></view></view></view></view>
（2）進(jìn)入到pages/index/type.wxss文件里，給玩轉(zhuǎn)婚博會(huì)這一類導(dǎo)航添加樣式，讓它以兩行四列的方式展現(xiàn)出來，具體代碼如下所示：
.content{font-family:"MicrosoftYaHei";background-color:#F0F0F0;}.line{height:10px;}.item{border:1pxsolid#cccccc;width:90%;margin:0auto;background-color:#ffffff;padding:10px;border-radius:5px;}.hr{height:1px;background-color:#cccccc;opacity:0.2;margin-top:10px;margin-bottom:10px;}.navs{display:flex;flex-direction:row;text-align:center;font-size:13px;margin-bottom:10px;padding-top:10px;}.nav{margin:0auto;width:70px;}
界面效果如圖8.23所示。
圖8.23玩轉(zhuǎn)婚博會(huì)導(dǎo)航
（3）玩轉(zhuǎn)婚博會(huì)導(dǎo)航設(shè)計(jì)完之后，特色分類導(dǎo)航可以直接復(fù)制其內(nèi)容，然后在這個(gè)基礎(chǔ)上進(jìn)行修改，進(jìn)入到pages/index/type.wxml文件，復(fù)制玩轉(zhuǎn)婚博會(huì)區(qū)域，修改成特色分類導(dǎo)航內(nèi)容，具體代碼如下所示：
<viewclass="content"><viewclass="line"></view><viewclass="item"><viewclass="title">玩轉(zhuǎn)婚博會(huì)</view><viewclass="hr"></view><viewclass="navs"><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/dxy.jpg"style="width:38px;height:38px;"></image></view><view>訂喜宴</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/phz.jpg"style="width:38px;height:38px;"></image></view><view>拍婚照</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/zhq.jpg"style="width:38px;height:38px;"></image></view><view>找婚慶</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/dhj.jpg"style="width:38px;height:38px;"></image></view><view>訂婚戒</view></view></view><viewclass="navs"><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/xhs.jpg"style="width:38px;height:38px;"></image></view><view>選婚紗</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/thp.jpg"style="width:38px;height:38px;"></image></view><view>淘婚品</view></view><viewclass="nav"><view><imagesrc="../../src="../../images/type/wzhbh/dmy.jpg"style="width:38px;height:38px;"></image></view><view>度蜜月</view></view><viewclass="nav"><view><imagesrc="../../images/type/wzhbh/zhc.jpg"style="width:38px;height:38px;"></image></view><view>租婚車</view></view></view></view><viewclass="line"></view><viewclass="item"><viewclass="title">特色分類</view><viewclass="hr"></view><viewclass="navs"><viewclass="nav"><view><imagesrc="../../images/type/tsfl/pxz.jpg"style="width:38px;height:38px;"></image></view><view>拍寫真</view></view><viewclass="nav"><view><imagesrc="../../images/type/tsfl/mxn.jpg"style="width:38px;height:38px;"></image></view><view>美新娘</view></view><viewclass="nav"><view><imagesrc="../../images/type/tsfl/zxj.jpg"style="width:38px;height:38px;"></image></view><view>裝新家</view></view><viewclass="nav"><view><imagesrc="../../images/type/tsfl/yyt.jpg"style="width:38px;height:38px;"></image></view><view>孕嬰童</view></view></view></view></view>
界面效果如圖8.24所示。
圖8.24特色分類導(dǎo)航
（4）我的婚博會(huì)導(dǎo)航區(qū)域也用此方法進(jìn)行設(shè)計(jì)，進(jìn)入到pages/index/type.wxml文件里，復(fù)制玩轉(zhuǎn)婚博會(huì)區(qū)域，修改成我的婚博會(huì)導(dǎo)航內(nèi)容。
界面效果如圖8.25所示。
圖8.25我的婚博會(huì)導(dǎo)航
（5）進(jìn)入到pages/type/type.json文件里，修改窗口標(biāo)題，具體代碼如下所示：
{"navigationBarTitleText":"全部分類"}
微信小程序在開發(fā)過程中總會(huì)遇到相同或者類似布局的區(qū)域，這時(shí)就要新設(shè)計(jì)一個(gè)區(qū)域，如果能將其提煉成模板，可以提煉成模板使用；不能的話，可以直接復(fù)制這個(gè)區(qū)域，在這個(gè)基礎(chǔ)上進(jìn)行修改，從而可以提高開發(fā)效率。小程序制作公司本文關(guān)于“小程序制作關(guān)于全部分類導(dǎo)航設(shè)計(jì)”的知識(shí)就介紹分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
