微信小程序开发之改变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 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
微信小程序实现的图片保存功能示例
Apr 24 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
Js中sort()方法的用法
2006/11/04 Javascript
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
pycharm修改界面主题颜色的方法
2019/01/17 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python简单验证码识别的实现方法
2019/05/10 Python
python输入多行字符串的方法总结
2019/07/02 Python
python join方法使用详解
2019/07/30 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
学生打架检讨书
2014/02/14 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
党员演讲稿
2014/09/04 职场文书
2014年客房部工作总结
2014/11/22 职场文书
介绍信格式
2015/01/30 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS