标签：solid 2px 元素 添加 let 数组 border timecolor left

写在前：想添加一个属性，向data中的、某个数组中、已存在的对象中。

第一步：静态页面使用wx:for 循环数据（本例中使用假数据）

<block wx:for="{{timearr}}">
	<view class="timeterm row">
		<view class="borderbg {{item.timecolor}}">{{item.timename}}</view>
		<view class="time">{{item.timeinterval}}</view>
	</view>
</block>

第二步：简单样式（自调）

.timeterm {
	width: 100%;
	height: 140rpx;
	font-size: 14px;
	color: #333;
	margin-top: 36rpx;
	padding-top: 28rpx;
	justify-content: space-between;
	/* background-color: pink; */
	border-radius: 8rpx;
	box-shadow: 0 2rpx 18rpx 0 rgba(0, 0, 0, .1);

}

.time {
	margin-right: 4%;
}

.borderbg {
	width: 50%;
	height: 100%;
	border-left: 2px solid #FE7C45;
	border-bottom: 2px solid #FE7C45;
	padding-left: 4%;
	border-radius: 0 0 0 8rpx;
}

.violet {
	border-left: 2px solid #886cff;
	border-bottom: 2px solid #886cff;
}

.yello {
	border-left: 2px solid #ffbc01;
	border-bottom: 2px solid #ffbc01;
}

.orange {
	border-left: 2px solid #fe6969;
	border-bottom: 2px solid #fe6969;
}

第三步：重点抽取

let timecolor = "timearr[" + i +"].timecolor"    

当我们想增加属性，修改数组对象中的属性值，可以获取到哪一项，其中 i  就是循环出来的下标，字符串拼接后赋值，以便使用；如下：中括号中的就是修改项，（另一中方法就是直接把赋值前的项直接放在中括号内，需自测）

  that.setData({
          [timecolor]:'violet'
  })

data: {
		timearr: [{
				timename: '时段1',
				timeinterval: '08:20 ~ 11:30',
			},
			{
				timename: '时段2',
				timeinterval: '08:20 ~ 11:30',
			},
			{
				timename: '时段3',
				timeinterval: '08:20 ~ 11:30',
			},
		]
	},

    //进入页面调用方法  
    onl oad: function(options) {
		this.colourTap();
	},
	// 颜色填充
	colourTap: function() {
		let that = this;
		let arr = this.data.timearr;
		let objone = {
			timecolor: 'violet'
		}
		for (var i = 0; i < arr.length; i++) {
			let timecolor = "timearr[" + i + "].timecolor"
			if (i % 3 == 0) {
				that.setData({
					[timecolor]: 'violet'
				})
			}
			if (i % 3 == 1) {
				that.setData({
					[timecolor]: 'yello'
				})
			} else if (i % 3 == 2) {
				that.setData({
					[timecolor]: 'orange'
				})
			}
		}
	},

注，本例中实现三个颜色的线条循环出现，重点是 取余数。

标签：solid,2px,元素,添加,let,数组,border,timecolor,left
来源： https://blog.csdn.net/ITLISHUANG/article/details/89852499

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。