微信小程序 如何设置底部tabBar 以及父子组件如何传值

1、底部tabBar设置 当然可以设置在顶部

在全局app.json中配置 "tabBar":{

  position:"bottom"  // 在这里设置tabBar的位置 可以选择顶部和底部

  "list":[

    

  {

   "text":"首页" ,//在这里可以写底部tabBar中内容 什么页面

    pagePath:"pages/index/index",

   iconPath://图片路径 可以新增images文件夹 里面放logo图   iconPath表示未选中状态,

  selectedIconPath://图片路径 表示选中后的状态

   


  },

  {

   "text":"搜索" ,//在这里可以写底部tabBar中内容 什么页面

    pagePath:"pages/search/index",

   

   iconPath://图片路径 可以新增images文件夹 里面放logo图   iconPath表示未选中状态,

  selectedIconPath://图片路径 表示选中后的状态


  },

 

      


}
2、关于父子组件传值

这里跟vue中很像

父传子通过属性:properties

properties:{

      obj:{

  type:String,

  value:"abc"


  }

 

}

value表示默认不传时的属性

 在<child obj="{{obj}}"/>中传递属性obj

子传父  在 <child  bindAbc="m"/>

在父组件中定义方法 m(e){

  console.log("m")
}

在子组件中 同样 在methods中 通过this.triggerEvent("Abc",要传递的参数)触发并可传递参数 但只能有一个 可以传对象

那么父组件可以接收  在m方法中有个参数e e.detail即为子组件传过来的值

微信小程序 如何设置底部tabBar 以及父子组件如何传值

上一篇:小程序-数据双向绑定


下一篇:WeChatDownload 最好用的微信公众文章下载工具