小程序基础学习（导航栏组件）

 一，创建组件

二，组件传入参数 

三，组件接收参数 

 四，组件渲染参数 

 五，组件代码

  
    
       {{item}}
        
  

// components/daoHangLan/daoHangLan.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    titles:{
      type:Array,
      value:[1,2,3,4]
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    indexs:0

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onClick(event){
      const indexs= event.currentTarget.dataset.index
      this.setData({indexs})
      this.triggerEvent("editTitles",event)
    }

  }
})

/* components/daoHangLan/daoHangLan.wxss */
.titles{
  display:flex;
  height: 40px;
  line-height: 40px;
  text-align:center;
}
.titles .item{
 flex: 1;
}
.titles .item.active{
  color:pink;
}

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

六，页面代码

// pages/five/five.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    titles:["冰箱","电视","洗衣机"],
    phone:["手机","相机","飞机"],
    xinghao:["vivo","苹果","小米"]

  },
  onClickEditTitle(event){
    const indexs = event.detail
  }

})

/* pages/five/five.wxss */

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar",
    "daoHangLan":"/components/daoHangLan/daoHangLan"

  },
  "enablePullDownRefresh": true
}