WeChat 애플릿은 데이터 배열에 포함된 개체의 속성 값을 수정하고, WeChat 애플릿은 탭바를 사용자 정의합니다.

WeChat 애플릿은 데이터의 배열에 포함된 객체의 속성값을 수정합니다.

최근에 작은 프로그램을 많이 작성했는데 그 중 아주 특별한 것이 탭바 스타일인데, 사용할 수 있는 컴포넌트가 없어서 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>

자바스크립트 각본

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

완료!
효과: