微信小程序开发之改变data中数组或对象的某一属性值


Posted in Javascript onJuly 05, 2018

前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值。

效果图:

微信小程序开发之改变data中数组或对象的某一属性值

我给大家总结了案例如下:

wxml如下:

<scroll-view class='hd-cont' scroll-x="true" style='width: 100%'>
 <view wx:for="{{sDate}}" wx:key="{{index}}" class='date-cont'>
  <view>{{item.week}}</view>
  <view bindtap='select' data-index="{{index}}" class=' curl {{item.selected}}'>{{item.date}}</view>
 </view>
</scroll-view> 

wxss如下:

.hd-cont {
 height: 126rpx;
 white-space: nowrap;
 padding-left: 20rpx;
 color: #fff;
 font-size: 28rpx;
 box-sizing: border-box;
}
.date-cont {
 width: 40rpx;
 margin-right: 70rpx;
 height: 100%;
 display: inline-block;
 padding-top: 10rpx;
 box-sizing: border-box;
 text-align: center;
}
.curl {
 width: 40rpx;
 height: 40rpx;
 border-radius: 50%;
 line-height: 40rpx;
}
.date-cont view:first-child {
 margin-bottom: 20rpx;
}
.focus {
 display: inline-block;
 width: 40rpx;
 height: 40rpx;
  font-family: Monaco;">#fff;
 color: #16cc80;
 border-radius: 50%;
 line-height: 40rpx;
}

wxjs如下:

实现思路:点击某一个日期时,获取当前点击的下表,点击事件bindtap可以获取到所点击的元素的自定义属性,也就是所点击的元素的在data中数组的下标,点击触发,清空所有对象中selected的值,然后将所点击的下标的selected值变为focus就可实现点击某一元素动态改变数组中的某一属性值。

Page({
data: {
 sDate: [
  { "week": "日", "date": "01" ,"selected": "focus" },
  { "week": "一", "date": "02", "selected": " " },
  { "week": "二", "date": "03", "selected": " " },
  { "week": "三", "date": "04", "selected": " " },
  { "week": "四", "date": "05", "selected": " " },
  { "week": "五", "date": "06", "selected": " " },
  { "week": "六", "date": "07", "selected": " " },
  { "week": "日", "date": "08", "selected": " " },
  { "week": "一", "date": "09", "selected": " " },
  { "week": "二", "date": "10", "selected": " " },
  { "week": "三", "date": "11", "selected": " " },
  { "week": "四", "date": "12", "selected": " " },
  { "week": "五", "date": "13", "selected": " " },
  { "week": "六", "date": "14", "selected": " " },
 ]
},
select: function (e) {
 var oIndex = e.currentTarget.dataset.index;
 var array = this.data.sDate;
 array.forEach( (item,index,arr) => {
  var sItem = "sDate["+ index + "].selected";
  this.setData({
   [sItem]: " "
  })
  console.log([sItem]);
  if(index == oIndex) {
   var oSelected = "sDate[" + index + "].selected"//这里需要将设置的属性用字符串进行拼接
   this.setData({
   [oSelected]: "focus"
   })
  }
 })
},
})

 总结

以上所述是小编给大家介绍的微信小程序开发之改变data中数组或对象的某一属性值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
详解vue引入子组件方法
Feb 12 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 #Javascript
微信小程序实现左右联动的实战记录
Jul 05 #Javascript
vue实现自定义多选与单选的答题功能
Jul 05 #Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 #Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 #Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 #Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 #Javascript
You might like
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
利用python实现逐步回归
2020/02/24 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
旅游安全协议书
2014/04/21 职场文书
党委班子对照检查材料
2014/08/19 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015入党自荐书范文
2015/03/05 职场文书
公司员工奖惩制度
2015/08/04 职场文书
自信主题班会
2015/08/14 职场文书
详解Python函数print用法
2021/06/18 Python