吃小孩蘸大蒜
吃小孩蘸大蒜
  • 发布:2020-12-11 14:19
  • 更新:2020-12-14 14:33
  • 阅读:890

nvue 中 transition 过度动画 安卓真机中、模拟器都特卡 , ios 过度比较流畅

分类:nvue

以下是案例代码 不知道是写的问题还是说安卓就会卡

<template>  
	<view>  
		<button class="but" @click="listMode = !listMode">按钮</button>  
  
		<view class="list" :style="{ width: `${width}rpx` ,  height: `${cols_1_height * lists.length + cols_1_margin_bottom * lists.length}rpx`  }"   offset-accuracy="100" show-scrollbar="false">  
			<view class="cell" v-for="(num, index) in lists" :key="index" :style="initProdStyle(index)">  
				<view class="panel">  
					<text class="text">{{ num }}</text>  
				</view>   
			</view>  
		</view>    
	</view>  
</template>  
  
<script>  
export default {  
	data() {  
		return {  
			lists: ['A', 'B', 'C', 'D', 'E' ,'E' ,'E' ,'E' ,'E' ,'E' ,'E' ,'E' , ],  
  
			listMode: true, //			模式 默认一行一个项目  
			width: 750, //				列表宽  
  
			cols_1_margin_left: 0, //	一个项目的左边距  
			cols_1_margin_bottom: 15, //一个项目的底边距  
			cols_1_height: 300, //		一个项目的高  
  
			cols_2_margin_left: 20, //	两个项目的左边距  
			cols_2_margin_centre: 15, //两个项目的中边距  
			cols_2_margin_bottom: 20, //两个项目的左边距  
			cols_2_height: 460 //	 	两个项目的高  
		};  
	},  
	methods: {  
		   
		/**  
		 * 每个项目的样式计算初始化  
		 * @param {Object} idx  
		 */  
		initProdStyle(idx) {  
			if (this.listMode) {  
				//一行一个  
				return {  
					width: `${this.width - this.cols_1_margin_left * 2}rpx`,  
					height: `${this.cols_1_height}rpx`,  
					top: `${this.cols_1_height * idx + (this.cols_1_margin_bottom + 0) * idx}rpx`,  
					left: `${this.cols_1_margin_left}rpx`  
				};  
			} else {  
				//一行两个  
				let itemWidth = (this.width - this.cols_2_margin_left * 2 - this.cols_2_margin_centre) / 2; //计算宽  
				return {  
					width: `${itemWidth}rpx`,  
					height: `${this.cols_2_height}rpx`,  
					top: `${this.cols_2_height * parseInt(idx / 2) + this.cols_2_margin_bottom * parseInt(idx / 2)}rpx`,  
					// 判断是第一列还是第二列  
					left: `${idx % 2 == 0 ? this.cols_2_margin_left : itemWidth + this.cols_2_margin_left + this.cols_2_margin_centre}rpx`  
				};  
			}  
		},  
		   
	}  
};   
</script>  
  
<style scoped>  
.but {  
	margin-top: 20rpx;  
	height: 100rpx;  
	width: 100rpx;  
}  
.list {  
	position: relative;  
	flex-wrap: wrap;  
	flex-direction: rowrow;  
}  
.cell {  
	position: absolute;   
  
	transition-property: opacity, transform, width, height, background-color, right, left, bottom, top;  
	transition-duration:3000ms;  
	transition-timing-function: ease;  
	transition-delay: 0s;  
  
	background-color: #c1bff7;  
	overflow: hidden;  
	/* box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2); */  
  
	border-top-left-radius: 5rpx;  
	border-top-right-radius: 5rpx;  
	border-bottom-left-radius: 5rpx;  
	border-bottom-right-radius: 5rpx;  
}  
  
.panel {  
	margin-top: 35rpx;  
	margin-bottom: 35rpx;  
	flex-direction: column;  
	justify-content: center;  
	border-width: 2rpx;  
	border-style: solid;  
	border-color: rgb(162, 217, 192);  
	background-color: rgba(162, 217, 192, 0.2);  
}  
.text {  
	font-size: 88rpx;  
	text-align: center;  
	color: #41b883;  
}  
</style>
2020-12-11 14:19 负责人:无 分享
已邀请:
DCloud_uniCloud_JSON

DCloud_uniCloud_JSON

去掉所有 border-radius试试看,安卓系统中圆角会降低性能

该问题目前已经被锁定, 无法添加新回复