微信小程序自定义组件---标签导航栏

闲着无聊，写一个标签式的导航栏，没有使用微信小程序的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": {}
}