118.【微信小程序 - 02】（九）

我们只需要在Vant的组件上添加 一个  info="x" 即可

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="2">
    <image
      slot="icon"
      src="{{item.iconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
   {{item.text}}
  </van-tabbar-item>
</van-tabbar>

"options":{
    styleIsolation:'shared'
  },

// custom-tab-bar/index.js
Component({
  "options":{
    styleIsolation:'shared'
  },
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    list: [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/index.png",
      "selectedIconPath": "/images/index-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "信息",
      "iconPath": "/images/mail.png",
      "selectedIconPath": "/images/mail-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "电话",
      "iconPath": "/images/phone.png",
      "selectedIconPath": "/images/phone-active.png"
    }
  ]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },
  }
})

/* custom-tab-bar/index.wxss */
.van-tabbar-item{
  --tabbar-item-margin-bottom:0;
}

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from "../store/store"
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    // 第四步: 指定要绑定的数据源Store
    store,  
    // 第五步: 指定要绑定的字段数据
    fields:{  
      sum:'sum' // 绑定字段的第三种方式
    },
    // 第六步: 指定绑定的方法
    actions:{ 
    }
  },
  observers:{
    'sum':function(newSum){
      console.log(newSum)
      this.setData({
        // 1这里我们不用写 this.data 直接写对象名即可。因为已经帮我们自动填充了
        'list[1].info':newSum
      })
    }
  },

methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }

// 在这个js文件中，专门来常见Store的实列对象
import { action, observable } from 'mobx-miniprogram';  // 引入MobX
// 抛出 Mobx
export const store = observable({
      // 共享下面的变量
      activeTabBrIndex:0,
        // (1).共享数据字段
      numA:1,
      numB:2,
        // (2).计算属性 -》 关键字 get 表示这个计算属性是只能 读取的。
       get sum(){
         return this.numA+this.numB
       },
       //  (3).actions 方法 用来修改store中的数据
       updateNum1:action(function(step){  // 第一个是 自定义方法名， 第二个是 action
         this.numA+=step
       }),
       updateNum2:action(function(step){
        this.numB+=step
      }),
      updateActiveTabBrIndex:action(function(indx){
        this.activeTabBrIndex=indx
      })  
})

// custom-tab-bar/index.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from "../store/store"
Component({
    behaviors:[storeBindingsBehavior],
  storeBindings:{
    // 第四步: 指定要绑定的数据源Store
    store,  
    // 第五步: 指定要绑定的字段数据
    fields:{  
      sum:'sum', // 绑定字段的第三种方式
      active1:'activeTabBrIndex'
    },
    // 第六步: 指定绑定的方法
    actions:{ 
      updateActive1:'updateActiveTabBrIndex'
    }
  },
  observers:{
    'sum':function(newSum){
      console.log(newSum)
      this.setData({
        // 1这里我们不用写 this.data 直接写对象名即可。因为已经帮我们自动填充了
        'list[1].info':newSum
      })
    }
  },
  "options":{
    styleIsolation:'shared'
  },
  data: {
    active: 0,
    list: [
      {
      "pagePath": "/pages/home/home",
      "text": "首页",
      "iconPath": "/images/index.png",
      "selectedIconPath": "/images/index-active.png"
    },
    {
      "pagePath": "/pages/message/message",
      "text": "信息",
      "iconPath": "/images/mail.png",
      "selectedIconPath": "/images/mail-active.png",
      info:2
    },
    {
      "pagePath": "/pages/contact/contact",
      "text": "电话",
      "iconPath": "/images/phone.png",
      "selectedIconPath": "/images/phone-active.png"
    }
  ]
  },
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
      this.updateActive1(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active1 }}" bind:change="onChange">
<!-- 假如说 item.info 存在的话，那么输出数字徽标 否则不输出 -->
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info : ''}}">
    <image
      slot="icon"
      src="{{item.iconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
   {{item.text}}
  </van-tabbar-item>
</van-tabbar>

active-color="#13A7A0"