关闭

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

标签: js动态改变数组对象列表中的样式微信小程序商城开发商品规格微信小程序点击显示对应的内容
6414人阅读 评论(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;
}





1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

微信小程序商品详情页交互源码(选择商品类型切换、预览商品图片)

maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!)。。源码下载:http://download.csdn.net/download/dknightl/99398721.效果图2.wxml<vi...
  • dKnightL
  • dKnightL
  • 2017-08-18 13:51
  • 2292

微信小程序 setData动态设置数组中的数据

现在有一组死数据 但是想在使用时动态修改其中的值 在setData中不能直接设置,真想。。。。。。,算了是这个和谐的社会救了那个工程师。 接下来,我们去征服她! 死数据: //地图上方控件 controls: [ { id: 1, ...
  • chou_out_man
  • chou_out_man
  • 2017-07-20 19:12
  • 6581

第5周 经典小程序1 题 动态数组的实现

问题及代码: 数组长度随数组元素改变,不会溢出,不会浪费资。 厦门的代码实现了简单的动态数组: #include #include int main() { //从控制台获取数组数值大小; int N; int *a; int i; printf("...
  • Emperor_21AD_ShiDi
  • Emperor_21AD_ShiDi
  • 2016-04-25 20:50
  • 728

微信小程序动态的加载数据

微信小程序刚出来有很多的东西还在更新,先写些刚开始要做的工作 1、首先要写在js里定义一个全局变量  data: {     datalist: []   }, 2、请求数据加载,获得整个数组信息     wx.reques...
  • yangyanli0309
  • yangyanli0309
  • 2017-04-11 13:34
  • 2473

微信小程序点击控件修改样式

现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它。 第一步:在wxss中定义被点击和未被点击的样式,如下: .service_selection .is_check...
  • nongweiyilady
  • nongweiyilady
  • 2017-06-30 18:23
  • 7748

微信小程序开发——wx:for循环渲染元素如何修改点击样式

循环渲染的导航栏,每个子元素都需要通过点击事件函数修改样式,但因为循环渲染,每个子元素的点击事件函数是一样的,所以不能分别修改对应子元素的样式。通过本文,你将了解微信小程序中循环渲染wx:for的子元素如何修改点击样式
  • Just_Do_It_1993
  • Just_Do_It_1993
  • 2017-04-06 16:06
  • 2986

微信小程序中如何使用setData修改数组或对象中的某一参数

本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值。这些值在微信小程序中都需要使用一个名为setData的方法,而这个方法是通过键值对的形式对数据进行修改,setData({ 参数名: 值 }); 既然知道是以键值对...
  • u014570569
  • u014570569
  • 2017-08-07 14:53
  • 4780

[微信小程序]点击切换卡片动画效果

欢迎加入微信小程序开发交流QQ群(173683895)'先上效果图, GIF: {{danshen_data.name}} ...
  • qq_35713752
  • qq_35713752
  • 2017-11-28 12:00
  • 3153

微信小程序开发:各种页面特效集合(持续更新)

微信小程序开发:各种页面特效合集
  • qq_38530880
  • qq_38530880
  • 2017-05-26 10:50
  • 3051

微信小程序传递参数(字符串、数组、对象)

作者:燕潇洒 导读:微信小程序向下个页面传递各种参数,和下个页面对参数的获取。 传递字符串 //传递参数(?model中,model是下个页面获取时的key) click:function(e){ var model = this.data.str; wx.na...
  • yanxiaosa
  • yanxiaosa
  • 2017-06-23 14:04
  • 7526
    个人资料
    • 访问:87487次
    • 积分:1765
    • 等级:
    • 排名:千里之外
    • 原创:78篇
    • 转载:1篇
    • 译文:2篇
    • 评论:33条
    最新评论