記錄：方便日後查閱資料，小程式分類導航欄。

功能：導航欄頁面可左右滑動，可點選跳轉頁面。

wxml：

<view>
  <swiper class="categoryList" indicator-dots="true" 
  indicator-color="rgba(228,228,228,1)" 
  indicator-active-color="#FECA49">
  <block wx:for="{{categoryList}}" wx:key="item">
  <swiper-item>
  <block wx:for="{{item}}" wx:key="item">
    <view class="category-info">
      <navigator url="{{item.url}}" open-type="navigate" hover-class="other-navigator-hover">
        <image src="{{item.src}}" 
        class="category-image"></image>
        <view class="category-text">{{item.name}}</view>
      </navigator>
    </view>
  </block>
  </swiper-item>
  </block>
  </swiper>
</view>
 

wxss：

.categoryList{
  width: 100%;
  height: 350rpx;
  border-bottom:20rpx solid #f4f4f4; 
}
.category-info{
  display: inline-block;
  text-align: center;
  position: relative;
  margin-top: 20rpx;
  height: 150rpx;
  width: 25%;
}
.category-image{
  width: 95rpx;
  height: 95rpx;
}
.category-text{
  font-size: 25rpx;
  width: 100%;
  line-height: 30rpx
}
 

js:

Page({
  data: {
    categoryList: {
      pageone: [{
        name: "服務",
        src: "/pages/images/pet.png",
        url: "/pages/home/home"
      }, {
        name: "機票",
        src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "船票",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "門票",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "車票",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "景點",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "ktv",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "美食",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }],
      pagetwo: [{
        name: "酒店",
        src: "/pages/images/pet.png",
        url: "/pages/home/home"
      }, {
        name: "奶茶",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "租車",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "電影",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "藥店",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "買花",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "外賣",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }, {
        name: "送水",
          src: "/pages/images/pet.png",
          url: "/pages/home/home"
      }]
    }
  }
})
 

記錄完畢.