wx:for动态修改样式
发布于 6 年前 作者 ogong 17603 次浏览 来自 问答

小程序里面没有js那样的id选择器，更改样式只能通过this.setData的方式赋值class的值。

但是在循环的时候就不太好用了，会同时更改掉所有样式：

<view  wx:for="{{item.list}}">
    <view bindtap="showContent" data-id="{{item.id}}">
        <view class="title">{{item.title}}</view>
    </view>
    <view class="{{item.id == currentId ? 'contentShow' : 'contentHiden'}}">
        <text>{{item.content}}</text>
    </view>
</view>

点击“title”来控制“content”的显示隐藏，我这样写最多只能显示一条内容（点击当前“title”的时候，会将其余的全部隐藏），如果要控制到只改变当前点击部位的样式，有好的解决方案吗？

5 回复
<view class="{{item.hide ? 'contentHiden' : 'contentShow'}}">
        <text>{{item.content}}</text>
    </view>

这段代码在我的ios手机上没有起到“点击后隐藏/显示”的效果，我修改成以下代码才出现“点击后隐藏/显示”的效果，

请教可能的原因。

<view wx:if=’{{item.hide}}’>{{item.content}}</view>  

你对应的类`contentHiden` 的样式写对了吗？

嗯嗯，受教了，谢谢。

动态setData就可以了，小程序嘛，你要抛弃jquery概念。

<view  wx:for="{{item.list}}" wx:key="{{index}}">
    <view bindtap="showContent" data-id="{{item.id}}">
        <view class="title">{{item.title}}</view>
    </view>
    <view class="{{item.hide ? 'contentHiden' : 'contentShow'}}">
        <text>{{item.content}}</text>
    </view>
</view>
Page({
  data: {
    item: {
      list:[
        { title: 'USA', content: '美国', id: 0, hide: false},
        { title: 'CHN', content: '中国', id: 1, hide: true},
        { title: 'BRA', content: '巴西', id: 2, hide: true},
      ]
    }
  },
  showContent:function(e){
    var that = this
    that.data.item.list[e.currentTarget.dataset.id].hide = !that.data.item.list[e.currentTarget.dataset.id].hide
    that.setData({
      item:that.data.item
    })
  }
})

我理解的你要的效果，如理解不对，请见谅。

回到顶部