uniapp中布局style绑定js数据

最新推荐文章于 2024-05-16 10:54:03 发布

falleg

最新推荐文章于 2024-05-16 10:54:03 发布

阅读量1.9k

点赞数

分类专栏： uni-app 文章标签： javascript vue js

本文链接：https://blog.youkuaiyun.com/weixin_44703147/article/details/107485688

版权

uni-app 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了uniapp中结合JavaScript操作实现的一些独特布局风格，包括：使用三元运算符嵌套调整样式，打乱并重排数组，通过计算属性生成随机颜色，利用filter和indexOf组合实现数组去重，以及一种避免重复赋值的条件判断技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="bg-img" 
	v-for="(item,index) in avatar" 
	:key="index" 
	:style="[{ backgroundImage:'url(' + avatar[index] + ')' }]">
</view>

以下内容为一些特别的操作方式
1、两个三元运算符嵌套

//两个三元运算符嵌套
return this.height == 'auto' ? 'auto' : String(this.height).indexOf('%') != -1 ? this.height : this.height + 'rpx';

2、打乱数组，实现随机重排数组元素

methods: {
			autoSort:function(a,b){
			    //生成随机数跟0.5比较,实现打乱数组的目的
			    return Math.random() >= 0.5 ? 1 : -1;
			},
			getCitys: function() {
				let temArr = this.citys.sort(this.autoSort);
				console.log(temArr)
				let data = JSON.parse(JSON.stringify(temArr));
				console.log(data[0])
				this.sortCitys = this.sortCitys.concat(data);
				console.log(this.sortCitys[0])
				console.log(this.sortCitys[1])
			}
		}

3、计算属性随机生成颜色

computed: {
			//单个标签的背景颜色随机生成
			randomColor(){
				return (index)=>{
					let R = this.$u.random(0,255);
					let G = this.$u.random(0,255);
					let B = this.$u.random(0,255);
					let bgColor = {backgroundColor: `rgba(${R}, ${G}, ${B}, 0.6)`};
					return bgColor;
				}
			}
}

4、巧妙地用filter结合indexof实现去重

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7]

        let newArr = arr1.filter(function(item, i, self) {
            let a = self.indexOf(item)
            console.log(`item----${item},self.indexOf(item)---${a},i----${i}`)
            return self.indexOf(item) === i;//例如匹配到了第8个元素，item=2，i=8，self.indexOf(item)返回的是第一个‘2’，下标也就是1，不等于8，函数return false，达到了去重的目的
            //去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。
        });

        console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8]

5、这部分的代码，避免了num>0之后对showNum==true的重新赋值，只需要简单的判断即可

//这部分的代码，避免了num>0之后对showNum==true的重新赋值，只需要简单的判断即可
				if(this.num > 0){
					if(!this.show){this.num ++}else {this.num --}
					if(this.num <= 0){this.showNum = false}
				}else {
					if(!this.show){this.num ++}
					if(this.num > 0){this.showNum = true}
				}