思路：使用scroll-view組件，可實現橫向滾動功能。scroll-view内包含一個(gè)動态的(de)view列表，代表導航的(de)每一項，導航要(yào / yāo)接收動态數組，然後使用列表展示。使用模闆技術做到(dào)可複用。

按照思路，先要(yào / yāo)做個(gè)template。

新建一個(gè)wxml文件：navbar.wxml

<template name="navbar">
<scroll-view class='navbar' scroll-x="true" style="width: 100%">
    <view id="{{item.id}}" wx:for="{{menus}}" wx:key="{{item.id}}" class="item {{currentTab==item.id ? 'active' : ''}}" bindtap="navbarTap">{{item.name}}</view>
  </scroll-view >
</template>

再建相應的(de)wxss文件：navbar.wxss

 .navbar{  
  background: #eeeeee;   
  white-space:  nowrap;
}  
.navbar .item{  
  margin: 20rpx;
  display: inline-block;
}  
.navbar .item.active{  
  color: #0000ff;
  font-weight:800;
}

這(zhè)樣一個(gè)導航模闆就(jiù)創建好了(le／liǎo)。

接着在(zài)自己的(de)頁面中使用這(zhè)個(gè)模闆。

建議頁面：index

在(zài)index.wxml中使用模闆：

<import src=https://www.wxapp-union.com/"navbar.wxml" />
<view>
<template is="navbar" data="{{menus,currentTab}}" />
</view>

這(zhè)裏要(yào / yāo)注意src的(de)路徑要(yào / yāo)找對，data參數名稱也(yě)要(yào / yāo)與模闆裏一緻。

接着在(zài)index.wxss中使用模闆樣式：

@import "/template/navbar.wxss";
引入這(zhè)麽一句就(jiù)行了(le／liǎo)。

然後在(zài)index.js中綁定數據：

Page({
  /**
   * 頁面的(de)初始數據
   */
  data: {
    menus: [
      { id:0, name: '水果' },
      { id:1, name: '水果' },
      { id:2, name: '一線海景' },
      { id:3, name: '水果' },
      { id:4, name: '水果' },
      { id:5, name: '一線海景' },
      { id: 6, name: '一線海景' },
      { id: 7, name: '水果' },
      { id: 8, name: '水果' },
      { id: 9, name: '一線海景' }
      ],
    currentTab: 0
  },
  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.id
    });
    console.log(e);
  }
})

運行結果：