微信小程序开发之改变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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 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
Banner程序
2006/10/09 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
解析Python编程中的包结构
2015/10/25 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
以下的初始化有什么区别
2013/12/16 面试题
中学生操行评语大全
2014/04/24 职场文书
农民工讨薪标语
2014/06/26 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
社会实践活动报告
2015/02/05 职场文书
办公用品质量保证书
2015/05/11 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
亮剑观后感500字
2015/06/05 职场文书
婚育证明样本
2015/06/16 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python