Uni-app 学习日志

app：

1、通过uni-app开发app注意需要用到的前端需要跨端（目前使用的ui库为uni-ui uview）

2、通过uni的动画实现对表格的滚动加载无线循环

3、如何导入uni-table（使用uniapp的官方导入功能）

4、如何导入uview库（官方的导入功能或者时官方的下载压缩包）

无线滚动（需要适配不同尺寸的屏幕）

方法一、

<template>
	<view class="container">
		   <view class="roll">
			    <uni-tr>
					<uni-td class='wid3'>编号</uni-td>
					<uni-td class='wid2'>内容</uni-td>
					<uni-td class='wid3'>操作</uni-td>
				</uni-tr>
		   	   <view class="roll_con">
				   <uni-table> 
					   <uni-tr>
						   <view class="roll_list" v-for="(item,index) in rollList" :key="index" :animation="animationData">
						   	 
							 <uni-td>{{item.id}}</uni-td>
						   	 <uni-td>{{item.title}}</uni-td> 
							 <uni-td> <button>按钮</button> </uni-td>
						   </view>
					   </uni-tr>
				   </uni-table>
		   	   				
				</view>
		   	   
			</view>
		   
		<button v-on:click="tt()">启动</button>
		<div>{{batery}}</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  rollList:[
							{title:'11111111111111111111111111111111111',
							id:"a"},
							{title:'22222222222222222222222222222222222',
							id:"b"},
							{title:'33333333333333333333333333333333333',
							id:'C'},
							{title:'44444444444444444444444444444444444',
							id:'D'},
							{title:'55555555555555555555555555555555555',
							id:'E'},
							{title:'66666666666666666666666666666666666',
							id:'F'},
							{title:'77777777777777777777777777777777777',
							id:'G'},
							{title:'88888888888888888888888888888888888',
							id:'H'}
				  				], 
				  animationData:{},
				  batery:''
			}
		},
		onReady() {
				 let animation = uni.createAnimation({
								transformOrigin: "50% 50%",
								duration:500,
								timingFunction: "linear" 
								 
							})
				this.animation = animation;
				this.animations()     
				}, 
		methods: {
			
			 animations(){
			 				let i = -1;
			 				let j = 0;
			 				let sum = this.rollList.length;
							 setInterval(()=>{
							 					if(i == sum){
							 						i = 0;
							 					} 
												if(j>=15)
												{
													j=0
													this.animation.duration=10
												}
												else{
													this.animation.duration=500
												}
							 					/*setTimeout(()=>{
							 						let arr = this.rollList.splice(i,1)[0];
							 						this.rollList.push(arr);
							 						this.rollList.splice(i,0,arr);
							 					},100)*/
							 					i++;
							 					j++;
							 					this.animation.translateY(-24*2 * j).step()
							 					this.animationData = this.animation.export();
							 				},2000)
							 
			 				
			 			},
			 tt(){
				   this.rollList.push( 
					   {title:'烟台嘉贝智能科技',
					   id:'名字'},
				    )
			 }
			 
		}
	}
</script>
 <style>
	 .wid3{
		 width: 20%;
	 }
	 .wid2{
	 		 width: 40%;
	 }
	 .uni-td{
		 height: 10px;
		 background-color: blue;
	 }
	 .bt_s{
		 width: 10px;
		 height: 9px;
		 background-color: yellow;
	 }
 .roll{
 	padding:32rpx;
 }
 .roll_con{
 	height:260rpx;
 	overflow:hidden;
 }
 .roll_list{
 	display:flex;
 	align-items:center;
 	margin-bottom:24rpx;
 }
 .roll_dot{
 	width:8rpx;
 	height:8rpx;
 	background: lightblue;
	background-color: red;
 	border-radius:8rpx;
 }
 .roll_title{
 	width:calc(100% - 24rpx);
 	font-size:28rpx;
 	line-height:28rpx;
 	color: lightcoral;
 	margin-left:16rpx;
 	display:inline-block;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 </style>

适配到app上是可能会出现残留信息需要手动添加一行即可消除，自动代码添加不能消除

方法二、

<u-row>
					<u-col span='12'> 
						<u-row>
							<u-col span='12'>
								<view class="c_l_b">   
										<uni-tr >
											<uni-th width="100px">编号</uni-th>
											<uni-th width="100px">订单</uni-th>
											<uni-th width="100px%">状态</uni-th>
										</uni-tr> 
										 <scroll-view scroll-y   style="height: 200px;">
											 <view :animation="animationData">
												 <uni-tr v-for='(item,index) in rollList'  >
												 	 <uni-th width="100px">{{item.id}}</uni-th>
												 	 <uni-th width="100px">{{item.order}}</uni-th>
												 	 <uni-th width="100px">{{index}}</uni-th>
												 </uni-tr>
											 </view> 
									   </scroll-view> 
								</view>
							</u-col>
							
						</u-row>
						
					</u-col>
				</u-row>

 针对方法二使用了scroll-view和动画。

如果想实现table需要使用uni-table框架显示内容

尝试多看看uniapp中的api介绍

尝试通过uniapp获取pda的按钮广播指令。