深圳小程序制作公司提醒全部分類導航界面集合了中國婚博會所有的導航入口，它可以分為3類導航：玩轉婚博會導航，有訂喜宴、拍婚照、找婚慶等服務；特色分類導航，有拍寫真、美新娘等服務；我的婚博會導航，有現(xiàn)金券、邀請函、簽到禮等服務。這3類導航布局方式一樣，可以先設計一類導航，然后直接進行復用，如圖8.22所示。
圖8.22全部分類界面
（1）進入到pages/index/type.wxml文件里，先來設計玩轉婚博會這一類導航，具體代碼如下所示：
<viewclass="content"><viewclass="line"></view><viewclass="item"><viewclass="title">玩轉婚博會</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）進入到pages/index/type.wxss文件里，給玩轉婚博會這一類導航添加樣式，讓它以兩行四列的方式展現(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玩轉婚博會導航
（3）玩轉婚博會導航設計完之后，特色分類導航可以直接復制其內容，然后在這個基礎上進行修改，進入到pages/index/type.wxml文件，復制玩轉婚博會區(qū)域，修改成特色分類導航內容，具體代碼如下所示：
<viewclass="content"><viewclass="line"></view><viewclass="item"><viewclass="title">玩轉婚博會</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特色分類導航
（4）我的婚博會導航區(qū)域也用此方法進行設計，進入到pages/index/type.wxml文件里，復制玩轉婚博會區(qū)域，修改成我的婚博會導航內容。
界面效果如圖8.25所示。
圖8.25我的婚博會導航
（5）進入到pages/type/type.json文件里，修改窗口標題，具體代碼如下所示：
{"navigationBarTitleText":"全部分類"}
微信小程序在開發(fā)過程中總會遇到相同或者類似布局的區(qū)域，這時就要新設計一個區(qū)域，如果能將其提煉成模板，可以提煉成模板使用；不能的話，可以直接復制這個區(qū)域，在這個基礎上進行修改，從而可以提高開發(fā)效率。小程序制作公司本文關于“小程序制作關于全部分類導航設計”的知識就介紹分享到這里，謝謝關注，博納網絡編輯整理。
