小程序自定义组件

本文主要是介绍小程序自定义组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

小程序自定义组件非常简单

首先在page目录里面新建组件目录component,在组件目录下新建mytab组件，格式与图一致
index.js示例代码如下：

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    color:{
      type:String,
      value:'#333'
    },
    selectedColor:{
      type:String,
      value:'#1aad19'
    },
    backgroundColor:{
      type:String,
      value:''
    },
    position:{
      type:String,
      value:'bottom'
    },
    borderStyle:{
      type: String,
      value:'#ccc'
    },
    list:{
      type:Array,
      value:[]
    },
    type:{
      type:Number,
      value:1
    }
  },

  data: {
    isShow:true
  },

  methods: {
    href(url){
    let data = url.currentTarget.dataset;
    let pageurl = '/'+getCurrentPages()[0].route; //获取加载的页面
    console.log(pageurl+'+++'+data.url);
    if(data.type ==1 && data.url!=pageurl){
      wx.switchTab({
        url: data.url,
      })
    }else if(data.type ==2 && data.url!=pageurl){
      wx.redirectTo({
        url: data.url,
      })
    }
    }
  }
})

然后在app.json里面配置组件名称和路径

   "usingComponents": {
      "mytab": "pages/component/mytab/index"
    },

这样就可以在页面中使用了

这篇关于小程序自定义组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！