WeChat アプレットはデータの配列に含まれるオブジェクトの属性値を変更し、WeChat アプレットはタブバーをカスタマイズします。

WeChatアプレットはデータ内の配列に含まれるオブジェクトの属性値を変更します

最近小さなプログラムをたくさん書いていますが、その中の 1 つが非常に特殊で、タブバー スタイルです。使用可能なコンポーネントがないため、ctrl+c と ctrl+v は使用できません /(ㄒoㄒ)/ ~~。
タブバーをクリックするとアイコンのスタイルを変更する効果があるので、テキスト、選択されていないアイコン スタイル、選択されたアイコン スタイルなどの大きなオブジェクトをそれぞれ含むリスト配列を宣言する予定です。 .、えっと、以前はとても喜んで書きましたが、スタイルを変更したい場合は、この配列内のオブジェクトも変更する必要があることが後でわかりました。それでは、どうすれば変更できますか?

1. 現在のアイコンのスタイルを記録する変数を追加します
2. ページの数値を取得するクリック関数を定義します。
3. 再レンダリングの具体的なコードは
   次のとおりです。

ページ

<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>

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",
      }
    ]

関数を定義します。

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   
      })
    }
  }

終わり！
効果：