tabbar.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. // components/tabbar/tabbar.js
  2. const app = getApp();
  3. Component({
  4. options: {
  5. styleIsolation: 'apply-shared' // 页面样式影响组件,组件样式不影响页面
  6. },
  7. properties:{
  8. active: { // 属性名
  9. type: Number,
  10. value: 0
  11. },
  12. isScroll: { // 属性名
  13. type: Boolean,
  14. value: false
  15. },
  16. },
  17. /**
  18. * 页面的初始数据
  19. */
  20. data: {
  21. num:0
  22. // active:0,
  23. // isScroll:true,
  24. },
  25. methods:{
  26. handleTab(e){
  27. let url = e.currentTarget.dataset.url
  28. console.log(1111111,url);
  29. wx.switchTab({
  30. url,
  31. complete(e){
  32. console.log(1111111,url,e);
  33. }
  34. })
  35. },
  36. /**
  37. * 回到顶部
  38. */
  39. backToTop: function () {
  40. wx.pageScrollTo({
  41. scrollTop: 0
  42. })
  43. },
  44. },
  45. pageLifetimes: {
  46. show: function() {
  47. const that = this;
  48. // 2. 从本地取初始数量
  49. const initNum = app.globalData.totalCartCount || 0;
  50. that.setData({ num: initNum });
  51. // 3. 注册回调(用箭头函数,确保引用唯一,不会每次创建新函数)
  52. this.updateCartCallback = (newNum) => {
  53. console.log('updateCartCallback');
  54. that.setData({ num: newNum });
  55. app.globalData.totalCartCount = newNum;
  56. };
  57. app.on('updateCartNum', this.updateCartCallback);
  58. },
  59. hide: function() {
  60. // 只移除当前实例的回调,不影响其他页面的 TabBar 实例
  61. if (this.updateCartCallback) {
  62. app.off('updateCartNum', this.updateCartCallback);
  63. }
  64. },
  65. resize: function(size) {
  66. // 页面尺寸变化
  67. }
  68. },
  69. attached() {
  70. },
  71. // 组件卸载时(极端情况兜底)
  72. detached() {
  73. if (this.updateCartCallback) {
  74. app.off('updateCartNum', this.updateCartCallback);
  75. }
  76. },
  77. /**
  78. * 生命周期函数--监听页面加载
  79. */
  80. onLoad(options) {
  81. },
  82. /**
  83. * 生命周期函数--监听页面初次渲染完成
  84. */
  85. onReady() {
  86. },
  87. /**
  88. * 生命周期函数--监听页面显示
  89. */
  90. onShow() {
  91. },
  92. /**
  93. * 生命周期函数--监听页面隐藏
  94. */
  95. onHide() {
  96. },
  97. /**
  98. * 生命周期函数--监听页面卸载
  99. */
  100. onUnload() {
  101. },
  102. /**
  103. * 页面相关事件处理函数--监听用户下拉动作
  104. */
  105. onPullDownRefresh() {
  106. },
  107. /**
  108. * 页面上拉触底事件的处理函数
  109. */
  110. onReachBottom() {
  111. },
  112. /**
  113. * 用户点击右上角分享
  114. */
  115. onShareAppMessage() {
  116. },
  117. })