收藏
回答

wx:for动态修改样式

小程序里面没有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 个回答

  • Xzzz
    Xzzz
    2017-12-26

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

    2017-12-26
    有用
    回复
  • 陈鹏
    陈鹏
    2017-05-31
    <view class="{{item.hide ? 'contentHiden' : 'contentShow'}}">
            <text>{{item.content}}</text>
        </view>


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

    请教可能的原因。

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

    2017-05-31
    有用
    回复
  • 彪锅
    彪锅
    2017-05-30

    嗯嗯,受教了,谢谢。

    2017-05-30
    有用
    回复
  • 云选片~影楼在线选片小程序
    云选片~影楼在线选片小程序
    2017-05-29

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

    2017-05-29
    有用
    回复
  • 麦琪
    麦琪
    2017-05-29
    <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
        })
      }
    })


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

    2017-05-29
    有用
    回复 1
    • Mr.Su🌸
      Mr.Su🌸
      2022-11-29
      怎么实现保留点击后的渲染效果而不是循环渲染
      2022-11-29
      回复
登录 后发表内容