记录：小程序分类导航栏

记录：方便日后查阅资料，小程序分类导航栏。

功能：导航栏页面可左右滑动，可点击跳转页面。

放上效果图：

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"
      }]
    }
  }
})

记录完毕.