[微信小程序]js动态改变数组对象列表中的样式

标签: js动态改变数组对象列表中的样式 微信小程序商城开发商品规格 微信小程序点击显示对应的内容
7678人阅读 评论(0) 收藏 举报
分类:

对微信小程序有兴趣的可以关注我或者加入我的微信小程序开发交流群(173683895)相互交流学习。 禁止闲扯和广告。' '

这里我用微信小程序商城开发中选择商品规格选择做示例:

先把效果图让大家看看,  默认情况下是这样的


当点击了规格11以后:    该商品规格的颜色变成红色,并且显示该规格商品的图片和价格


当点击了规格22以后: 该商品规格的颜色变成红色,并且显示该规格商品的图片和价格,同时把其它规格的商品规格颜色恢复成了黑色



下面来给大家看看示例的代码:

    <view class='page_row' style='height:80rpx'>
      <view class='guige'>规格:</view>
      <view class='serven' wx:for="{{guige}}" wx:key="index">
        <text bindtap='arr_guige' class='{{item.is_say_yes?"on":""}}' data-index='{{index}}'>{{item.arr_guige}}</text>
      </view>
    </view>
    <view wx:if="{{arr_remark}}">{{arr_remark}}</view>
    <image wx:if="{{guige_img}}" bind:touchstart="touchstart" bind:touchend="touchend" class='guige_img' src='{{guige_img_src}}'></image>
    <text wx:if="{{arr_price}}">{{arr_price}} 元</text>

js

  arr_guige:function(e){
    var that = this;
    guige_index = e.currentTarget.dataset.index;
    var guige_img_src = this.data.img + this.data.guige[guige_index].arr_img;
    var arr_price = this.data.guige[guige_index].arr_price;
    for (var i = 0; i < this.data.guige.length; i++) {
      that.setData({
        ['guige[' + i + '].is_say_yes']: false,
      })
      if (i == guige_index) {
        that.setData({
          ['guige[' + i + '].is_say_yes']: true,
        })
       
      }
    }  
    this.setData({
      guige_img:true,
      guige_img_src: guige_img_src,
      arr_price: arr_price
    })
  },

css

.guige {
  width: 150rpx;
}
.guige_img{
  width: 200rpx;
  height: 200rpx
}
.serven {
  display: flex;
  flex-wrap: wrap;
}

.serven text {
  font-size: 32rpx;
  border: 1px solid #d0d0d0;
  border-radius: 10rpx;
  background: #f2f2f2;
  padding: 0 15rpx 0 15rpx;
  margin: 15rpx;
}
.page_row{
  display: flex;
  flex-direction: row;
  align-items: center;
}





查看评论

软件工程杂志《非程序员》第一期

软件工程杂志《非程序员》第一期名    称: 《非程序员》第一期设    计: UMLCHINA编    者: UMLCHINA联系邮件: think@umlchina.com 版    本: 第一期...
  • dbbdggdbbdgg
  • dbbdggdbbdgg
  • 2001-05-27 12:05:00
  • 695

微信小程序之数组操作:push与concat的区别

微信小程序中需要用到数组的操作,介于本人js基础薄弱,故数组操作进行简单记录,以备后期方便学习: push和concat二者功能很相像,但有两点区别。 先看如下例子: var arr...
  • wangsf789
  • wangsf789
  • 2016-12-05 16:16:19
  • 35425

微信小程序 - 仿果库列表

这个篇文章带大家一起练练微信小程序布局。下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现最大的布局是view, view布局中包含了:一张图片,文字描述,信息栏和分界线...
  • u012987546
  • u012987546
  • 2016-11-27 15:23:32
  • 16423

微信小程序入门-新闻列表

前言前面已经完成欢迎页面的编写,下面将写一个新闻页面,主要包含导航栏,轮播图,新闻列表,包含的技术主要有swiper组件的使用。为了方便代码的管理,把之前的代码同步到github上,在这基础上写新闻列...
  • xiaofengwu123
  • xiaofengwu123
  • 2017-01-18 20:54:03
  • 3935

微信小程序实现给循环列表添加点击样式

微信小程序有个属性hover-class=’active’,是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ...
  • yonggeit
  • yonggeit
  • 2017-04-15 00:10:52
  • 9588

微信小程序开发详解(十)---微信小程序样式基础

样式属性为如下内容: 1  尺寸 2  背景 3  边框 4  边距 5  文本 6  其他(列表,内容,表格) 未完待续。。。...
  • aoaoxiexie
  • aoaoxiexie
  • 2017-01-12 14:48:03
  • 10266

微信小程序实现列表页面及上拉加载功能

微信小程序实现列表页面及上拉加载功能my god,离上篇博客的时间竟然过去将近四个月了。 我呢,有幸从一个Android小白变成了一个前端小白- -这周开始学习微信小程序啦 大概是1月份开始听到最...
  • YanzYan
  • YanzYan
  • 2017-01-11 17:33:20
  • 18899

微信小程序实现列表上拉加载,自动适应屏幕

1.视图层wxml
  • qq_28988969
  • qq_28988969
  • 2017-08-04 12:41:53
  • 1132

【微信小程序】仿京东商品分类界面

要点: 1、左右两侧可以各自滑动,互不影响 2、flex-wrap的应用 3、切换左侧导航后,右侧显示对应变化,且默认显示在顶部位置...
  • sinat_34880701
  • sinat_34880701
  • 2017-12-20 17:04:11
  • 2049

微信小程序商品详情页规格属性选择

微信小程序商城开发之商品详情页 商品属性规格选择功能实现
  • liuchen1314
  • liuchen1314
  • 2017-10-30 11:51:17
  • 569
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 17万+
    积分: 2863
    排名: 1万+
    承接微信小程序功能和项目
    本团队承接微信小程序前端部分的功能和项目,价格绝对优惠,服务包你满意,还可一对一指导,告诉你实现方式及实现逻辑。有意者请加微信 13977284413 了解详情。另外博主收徒咯。
    博客专栏
    最新评论