收藏
回答

如何点击分享实现相应背景色的改变?

优惠卷是请求数据循环出来的。点击当前为index为0的优惠卷 相应的index为0的优惠卷背景变成灰色。同理index为1一样。但是我点击分享任何一张优惠卷后, 两张优惠卷都变成灰色的 怎么解决呢 亲们

回答关注问题邀请回答
收藏

3 个回答

  • I want fly
    I want fly
    06-30

    可以从js上入手,把优惠劵数组的每一项加入一个字段,用于控制是否显示灰色,当点击后把数组对应的该字段状态改变

    06-30
    有用 1
    回复 1
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    06-30

    这个问题其实挺简单。。

    .content {
     width: 300rpx;
     height: 100rpx
    }
    .content.active {
     background: #DDD;
    }
    <block wx:for="{{list}}" wx:key="*this">
    <button data-index="{{index}}" bindtap="handleClick" class="content {{item.isActive ? 'active' : ''}}">{{item.name}}</button>
    </block>
    
    data: {
     list: [{
      name: '标题1',
      isActive: false  
     }, {
      name: '标题2',
      isActive: false 
     }]
    },
    handleClick(e) {
      const { dataset: {index}} = e.currentTarget
      const { list } = this.data
      for (let item of list) {
        item.isActive = false //将数组下所有该字段改为false
      }
      list[index].isActive = true // 将当前点击的这块元素下的该字段设置为 true
      this.setData({
       list
      })
    }
    
    06-30
    有用
    回复 2
    • Sum、
      Sum、
      06-30
      好了 谢谢哈  还有一个问题就是  点击分享之后背景状态已改变isActive为true  但再次刷新界面的时候 点击分享的那个优惠卷背景状态未改变 isActive还是false  是不是要存到缓存中?
      06-30
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      06-30回复Sum、
      如果这种 建议你点击分享的时候请求接口,后端记录状态。
      06-30
      1
      回复
  • 崔富源
    崔富源
    06-30

    item.isChange

    06-30
    有用
    回复 2
    • Sum、
      Sum、
      06-30
      能具体点吗?
      06-30
      回复
    • 崔富源
      崔富源
      06-30回复Sum、
      isChange给到数组每一项,分享时遍历数组修改同类isChange属性。
      06-30
      2
      回复
登录 后发表内容
问题标签