使用uview内容空的组件

启威qw

已于 2023-06-07 11:41:00 修改

阅读量343

点赞数

文章标签： uni-app 开发语言 javascript

于 2023-06-07 11:40:14 首次发布

本文链接：https://blog.csdn.net/qq_52680330/article/details/131084476

版权

template部分

<view class="emty" v-show="delivery.length===0">
				<u-empty mode="search"  text="暂无内容" 
				width="400" textSize="16" >
				</u-empty>
</view>

css部分

这里有一个弹入的动画效果

.emty{
		padding-top: 50px;
		margin: 0 auto;
		animation: bounce-in 1s ease-out;
	}
	@keyframes bounce-in {
	  0% {
	    opacity: 0;
	    transform: translateY(-500px) rotate(-45deg);
	  }
	  50% {
	    opacity: 1;
	    transform: translateY(0) rotate(0);
	  }
	  65% {
	    transform: translateY(-30px) rotate(0);
	  }
	  80% {
	    transform: translateY(0) rotate(0);
	  }
	  95% {
	    transform: translateY(-10px) rotate(0);
	  }
	  100% {
	    transform: translateY(0) rotate(0);
	  }