微信小程序点击列表添加 去除属性

首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式

wxml:

<view>
      <view wx:for="{{list}}" wx:key="num" class="list" >
        <text bindtap=‘changColor‘  data-index=‘{{index}}‘ class=‘{{item.check?"text-active":""}}‘ >| {{item.message}}</text>
      </view>
</view>

js:

/*  这里获取list是一个数组对象

  tomorrow: [

    {

      thing: ‘吃饭‘,

      check: false

    },

    {

      thing: ‘睡觉‘,

      check: false

    },

    { 

      thing: ‘打豆豆‘,

      check: false

    }

  ]

*/changColor: function (e) {
    let index = e.currentTarget.dataset.index
    let arrs = this.data.list;
    if (arrs[index].check == false) {
      arrs[index].check = true;
    } else {
      arrs[index].check = false;
    }
    this.setData({
      list: arrs
    })
  },

核心在于修改对象属性check的值,然后在元素渲染是根据值进行样式的添加

原文地址:https://www.cnblogs.com/yan-captain/p/10335440.html

时间: 2024-11-05 15:53:50

微信小程序点击列表添加 去除属性的相关文章

微信小程序点击列表跳转到对应详情页

点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据 原文地址:https://www.cnblogs.com/zxmonster/p/11583729.html

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

微信小程序,我的英雄列表

最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下载完成之后默认安装即可 2.新建项目 打开微信开发者工具,(首次需要微信扫码登录),如下图所示,点击添加项目,然后依次输入APPID,项目名称,并选择你的项目所在的目录(本地目录

微信小程序 - 展开收缩列表

代码源自于:微信小程序示例官方 index.wxml 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}"> 2 <view class="kind-list-item"> 3 <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-h

微信小程序点击滚动到指定位置

公司项目要做一个类似微信通讯录导航的效果,点击右侧字母页面滚动到相应位置. 因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置.此时只能使用小程序创建对象实例的API获取节点信息: let query = wx.createSelectorQuery().in(this); query.selectViewport().scrollOffset() query.select("#Nav").boundingClientRect(); query.s

微信小程序之多列表的显示和隐藏功能(附源码)

今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和

微信小程序之一:动态添加view(view包含picker,input)

<view wx:for="{{array}}" wx:key="this" class="borderContainer"> <view class="borderContainer1"> <view class="firstBorder"> <view class="firstBorderInput"> <input maxlen

微信小程序-js为object添加属性

代码如下: var my_set = result.attributes.my_set; if (my_set == undefined) { my_set = { is_be_agree: e.detail.value } } else { my_set.is_be_agree = false }; 解释: 当我们不确定对象my_set 是不是空的.对象有什么属性的时候,想要执行以下操作: 1.如果对象my_set 属性是空的,则给他添加 is_be_agree的属性,属性值是false: 2

微信小程序点击顶部导航栏切换样式

类似这样的效果 1 <view class='helpCateList'> 2 <!-- 类别 --> 3 <scroll-view class='scroll-view' scroll-x="true"> 4 <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item&