步骤2：搭建首页热门栏目

本文主要围绕主页的 index 页面和配置文件 app.json 进行讲解，更多 index 代码细节可参见 index 页面 和配置文件 app.json。

操作步骤

步骤1：搭建底部导航栏

1. 在 app.json 的 pages 数组配置好相应页面。
2. 然后在 app.json 页面。通过设置 tabBar 配置底部导航栏。
   • app.json - pages
   • app.json - tabBar

   "pages": [
       "pages/index/index",
       "pages/my/my",
       "pages/dp/dp",
       "pages/gltl/gltl",
       "pages/grxx/grxx",
       "pages/xgxx/xgxx",
       "pages/gywm/gywm",
       "pages/buzx/buzx",
       "pages/glxq/glxq",
       "pages/xpl/xpl",
       "pages/fbgl/fbgl",
       "pages/xdym/xdym",
       "pages/jqqt/jqqd",
       "pages/dingdan/dingdan",
       "pages/xd/xd",
       "pages/gwx/gwx",
       "pages/ddgl/ddgl",
       "pages/qccg/qccg",
       "pages/sjgl/sjgl",
       "pages/fbpl/fbpl"
   ],

   "tabBar": {
       "color": "#a9b7b7",
       "selectedColor": "#11cd6e",
       "borderStyle": "black",
       "list": [
           {
               "pagePath": "pages/index/index",
               "iconPath": "images/font-ui/shouye.png",
               "selectedIconPath": "images/font-ui/shouye.png",
               "text": "首页"
           },
           {
               "pagePath": "pages/dp/dp",
               "iconPath": "images/font-ui/dianpu.png",
               "selectedIconPath": "images/font-ui/dianpu.png",
               "text": "店铺"
           },
           {
               "pagePath": "pages/dingdan/dingdan",
               "iconPath": "images/font-ui/dingdan.png",
               "selectedIconPath": "images/font-ui/dingdan.png",
               "text": "订单"
           },
           {
               "pagePath": "pages/gltl/gltl",
               "iconPath": "images/font-ui/gonglve.png",
               "selectedIconPath": "images/font-ui/gonglve.png",
               "text": "攻略"
           },
           {
               "pagePath": "pages/my/my",
               "iconPath": "images/font-ui/wode.png",
               "selectedIconPath": "images/font-ui/wode.png",
               "text": "我"
           }
       ]
   },

3. 将 tarBar 中相应的 UI 图片存到小程序 imges 目录中编译即可。
   

步骤2：搭建中部导航栏

1. 进入首页 index 目录，通过 index.wxml 和 index.wxss 编写前端页面首页导航栏。
   • index.wxml
   • index.wxss

   <!--pages/index/-->
   <view class="banner">
       <swiper class="swip_main" indicator-dots autoplay interval="6000" circular>
           <block wx:for="{{mglist}}">
               <swiper-item >
                   <image style="width: 100%;height: 100%;" mode="scaleToFill" src="{{item.photo}}"></image>
               </swiper-item>
           </block>
       </swiper>
   </view>
   <view class="tz">
       <view class="tz_zp">
       <image src="../../images/font-ui/zggg.png"></image>
       </view>
       <swiper class="swiper-news-top" vertical="true" autoplay="true" circular="true" interval="3000">
           <block wx:for="{{msgList}}" >
               <navigator url="" open-type="navigate">
                   <swiper-item>
                       <view class="swiper_item" >{{item.text}}</view>
                   </swiper-item>
               </navigator>
           </block>
       </swiper>
   </view>
   <view class="nav">
       <view class="nav-banner"  bindtap='showlist'>
           <view class="nav-banner-img">
               <image src="../../images/font-ui/bigmosque.png"></image>
           </view>
           <view class="nav-banner-text" >东区食堂</view>
       </view>
       <view class="nav-banner" bindtap='showzd'>
           <view class="nav-banner-img">
               <image src="../../images/font-ui/bigschool.png"></image>
           </view>
           <view class="nav-banner-text">西区食堂</view>
       </view>
       <view class="nav-banner" bindtap='showwd'>
           <view class="nav-banner-img">
               <image src="../../images/font-ui/moderncity.png"></image>
           </view>
           <view class="nav-banner-text">每日优惠</view>
       </view>
       <view class="nav-banner" bindtap='showwd'>
           <view class="nav-banner-img">
               <image src="../../images/font-ui/store.png"></image>
           </view>
           <view class="nav-banner-text">南湖食堂</view>
       </view>
       <view class="nav-banner"  bindtap='showtk'>
           <view class="nav-banner-img">
               <image src="../../images/font-ui/temple.png"></image>
           </view>
           <view class="nav-banner-text">美食分享</view>
       </view>
   </view>

   .nav{
       width: 100%;
       height: 150rpx;
   }
   .nav-banner{
       height: 100%;
       width: 20%;
       background-color: azure;
       float: left;
   }
   .nav-banner-img{
       width: 100%;
       height: 75%;
   }
   .nav-banner-img image{
       width: 70%;
       height: 80%;
       padding: 10% 15%;
   }
   .nav-banner-text{
       text-align: center;
       margin-top: -10rpx;
       font-size: 26rpx;
   }

2. 进入 index.js 页面，我们使用 wx.navigateTo(Object object) 跳转到应用内的某个页面，我们对导航栏给他点击事件，在用户在点击之后跳转到敬请期待页面。
   showwd:function(){
     wx.navigateTo({
       url: '../jqqd/jqqd',
     })
   },
   showtk:function(){
     wx.switchTab({
       url: '../gltl/gltl'
     })
   },

   说明：

   保留当前页面，跳转到应用内的某个页面。其中可使用 wx.navigateBack 返回到原页面。小程序中页面栈最多十层。

步骤3：搭建首页热门美食栏目

1. 进入 CMS 内容管理控制台，新建美食列表内容模型，数据库名称设置为 mslb。
2. 进入新建的美食列表页面，如下设置内容集合：

   内容类型	展示名称	数据库字段名
   图片	附件照片	src
   单行字符串	名称	name
   单行字符串	简介	jj
   单行字符串	地址	dz
   单行字符串	btn1	btn1
   单行字符串	btn2	btn2
   单行字符串	btn3	btn3

   说明

   更多 CMS 内容管理详细操作请参见 搭建轮播图。

3. 进入 index.wxml 页面，使用列表渲染 wx:for 进行列表展示。
   <view class="rmbs">
       <view class="rmbs-title">
           <view class="rmbs-title-text">热门美食</view>
           <view class="rmbs-title-more" bindtap='showlist'>查看更多 ></view>
       </view>
       <view class="rmbs-list" wx:for="{{rmbs}}" wx:for-item="item" wx:key="_id"  bindtap='showbs' id="{{item._id}}" wx:if="{{index<10}}">
           <view class="rmbs-list-photo">
               <image src="{{item.src}}"></image>
           </view>
           <view class="rmbs-list-text">
               <view class="rmbs-list-text-tit1">{{item.name}}</view>
               <view class="rmbs-list-text-jj">{{item.jj}}</view>
               <view class="rmbs-list-text-tit2">地址：{{item.zd}}</view>
               <view class="rmbs-list-text-tit3">
                   <view class="rmbs-list-text-btn" style="background-color: rgb(26, 69, 134);">{{item.btn1}}</view>
                   <view class="rmbs-list-text-btn" style="background-color: rgb(24, 122, 29);">{{item.btn2}}</view>
                   <view class="rmbs-list-text-btn" style="background-color: coral;">{{item.btn3}}</view>
                   <view class="rmbs-list-text-btn">{{item.btn4}}</view>
               </view>
           </view>
       </view>
   </view>

   这里我们会发现有的时候 item.btn1 要是为空也会显示出来，我们可以改进一下，使用 wx:if 条件渲染。增加判断之后如果是空置就不显示这个按钮。
   <view class="rmbs-list-text-btn" style="background-color: rgb(26, 69, 134);" wx:if="{{item.btn1!=''}}">{{item.btn1}}</view>
   <view class="rmbs-list-text-btn" style="background-color: rgb(24, 122, 29);" wx:if="{{item.btn2!=''}}">{{item.btn2}}</view>  
   <view class="rmbs-list-text-btn" style="background-color: coral;" wx:if="{{item.btn3!=''}}">{{item.btn3}}</view>

   最终效果如下：