微信小程序自定義組件---標籤導航欄

閒着無聊，寫一個標籤式的導航欄，沒有使用微信小程序的scroll-view，感覺這玩意兒有點詭異，添加了scroll-x=“true”,也加了樣式父元素white-space:nowrap;子元素：display:inline-block;這item就是不滑動，雷打不動那種。

沒辦法，只能捨棄掉它了，還好捨棄它也只是不能監聽到滾動事件而已，這裏也用不上監聽滾動。

在實現自定義組件的情況下，還去掉了滾動樣式。

下面是代碼：

父元素json文件：

"usingComponents": {
    "label-navigation": "../../components/labelNavigation/index"
}

父元素js文件：

// pages/type/index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    tabData: [
      { id: 1, title: "科普讀物" },
      { id: 2, title: "低幼啓蒙" },
      { id: 3, title: "歷史典故" },
      { id: 4, title: "小說漫畫" },
      { id: 5, title: "少兒讀物" },
      { id: 6, title: "童話故事" },
      { id: 7, title: "育兒寶典" }
    ],
    itemStyle: "color: red;border-bottom:3px solid red;"
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.getBookData();
  },

  //頁碼改變事件
  pagChange: function(e){
    console.log("頁碼改變時傳到父組件的值", e);
  },
})

父元素wxml文件：

<label-navigation nav-data="{{tabData}}" item-style="{{itemStyle}}" bind:tabClick="tabChange"></label-navigation>

子元素wxml：

<view class="naviation-container">
    <view wx:for="{{navData}}" class="nav-item" bindtap="tabChange" data-index="{{index}}" data-id="{{item.id}}" wx:key="{{index}}">
      <view class="item-block" style="{{currentIndex==index? itemStyle:''}}">{{item.title}}</view>
    </view>
</view>

子元素wxss:

/* components/labelNavigation/index.wxss */
view,text,image{
  box-sizing: border-box;
}
.naviation-container{
  width: 100%;
  overflow-x:auto;
  display: flex;
  flex-wrap: nowrap;
}
.naviation-container::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
.nav-item{
  flex-shrink: 0;
  padding: 0 20rpx;
}
.item-block{
  display: inline-block;
  padding: 20rpx 0;
}
.item-active{
  color: #0099CC;
  border-bottom: 3px solid #0099CC;
}

子元素js文件：

// components/labelNavigation/index.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    navData: {
      type: Array //示例：[{id:1,title:"第一個分類"},{id:2,title:"第二個分類"}]
    },
    currentNav: {
      type: Number,
      value: 0
    },
    itemStyle: {
      type: String,
      value: "color: #0099CC;border-bottom: 3px solid  #0099CC;"
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    currentIndex: 0
  },
  //生命週期函數列表
  lifetimes: {
    // 在組件實例進入頁面節點樹時執行
    attached: function () {
      this.setData({
        currentIndex: this.data.currentNav
      })
    },
    // 在組件實例被從頁面節點樹移除時執行
    detached: function () {

    }
  },
  /**
   * 組件的方法列表
   */
  methods: {
    tabChange: function (e) {
      this.setData({
        currentIndex: e.currentTarget.dataset.index
      })
      const option = {
        current: e.currentTarget.dataset.index,
        id: e.currentTarget.dataset.id
      }
      this.triggerEvent('tabClick', option)
    }
  }
})

子元素json文件：

{
  "component": true,
  "usingComponents": {}
}