El subprograma WeChat modifica los valores de los atributos de los objetos contenidos en la matriz en los datos, y el subprograma WeChat personaliza la barra de pestañas.

El subprograma WeChat modifica los valores de los atributos de los objetos contenidos en matrices en los datos

He escrito muchos programas pequeños recientemente, pero uno de ellos es bastante especial, que es el estilo de barra de pestañas. No hay componentes disponibles, lo que significa que Ctrl+c y Ctrl+v no se pueden usar /(ㄒoㄒ)/ ~~.
Entonces solo puedes escribir a mano. La barra de pestañas tendrá el efecto de cambiar el estilo del ícono al hacer clic en ella, por lo que planeo declarar una matriz de lista que contenga cada objeto grande, incluido el texto, el estilo del ícono no seleccionado, el estilo del ícono seleccionado, etc. ., emmm Estaba muy feliz de escribir lo que escribí antes, pero luego descubrí que si quiero cambiar el estilo, los objetos en esta matriz también deben modificarse, entonces, ¿cómo lo cambio?

1. Agregue una variable para registrar el estilo del icono actual
2. Defina una función de clic para obtener el valor numérico de la página.
3. El código específico para volver a renderizar
   es el siguiente:

página

<view class="mainbox"> 
    <view class="item-box" wx:for="{
     
     {list}}" wx:key="index" >
      <image src="{
     
     {item.now}}" mode="aspectFit" style="{ 
        { 
        item.normalstyle}}" bindtap="onchange" data-num="{
     
     {item.number}}"/>
    </view>
</view>

secuencia de comandos JavaScript

list:[
      {
    
    
        number:0,
        normal:'../../image/0-0.png',
        active:'../../image/0-1.png',
        normalstyle:'width:60px;height:30px',
        now:'../../image/0-0.png',   //这个就是我用来存储当前样式的值
      },
      {
    
    
        number:1,
        normal:"../../image/1-0.png",
        active:"../../image/1-1.png",
        normalstyle:'width:60px;height:30px',
        now:"../../image/1-0.png",
      },
      {
    
    
        number:2,
        normal:'../../image/flower-0.png',
        active:"../../image/flower-1.png",
        normalstyle:'width:60px;height:80px;margin-bottom:15px;',
        now:'../../image/flower-0.png',
      },
      {
    
    
        number:3,
        normal:"../../image/2-0.png",
        active:"../../image/2-1.png",
        normalstyle:'width:60px;height:30px',
        now:"../../image/2-0.png",
      },
      {
    
    
        number:4,
        normal:"../../image/4-0.png",
        active:"../../image/4-1.png",
        normalstyle:'width:60px;height:30px',
        now:"../../image/4-0.png",
      }
    ]

Definir función:

methods: {
    
    
    onchange(e)
    {
    
    
      const num=e.target.dataset.num
      for(var i=0;i<5;i++)    //遍历一下全部修改为普通样式
      {
    
    
        var a='list['+i+'].now'   //这里一定要在外面定义，setdata里面是不允许这样子写的
        var b=this.data.list[i].normal  //同理
        this.setData({
    
    
            [a]:b    //前面的a要加上[]表示引用外部变量
        })
      }
      var a='list['+num+'].now'
      var b=this.data.list[num].active
      this.setData({
    
       //设置选中样式
        [a]:b   
      })
    }
  }

¡Hecho!
Efecto: