uniapp 实现洗牌发牌的功能

首先进行页面的布局，通过v-for 生成 3X3 的页面布局

<view class="card-item" v-for="list in 9" :key="list"></view>

为这些view item制定样式让他们生成我们想要的布局
我这里就生成 3 x 3 的布局

.card-item{
   width:30vm;
   heigth:40vm;
   margin-top:20rpx;
   transition:all 0.2s; 
}

你可以自己定义item的样式 例如添加圆角（border-radius:20rpx ）
添加背景图片 background：url(图片的地址)
如果添加背景图片后，发现没有完全的显示图片，就需要再添加一个属性 background-size：100% 100%；
基本布局设计完成后 我们来实现洗牌发牌的功能

使用自定义指令实现洗牌发牌的功能

directives 可以注册全局的指令也可以注册局部的指令

directives:{
   trans:{ //自定义指令的名字
      componentUpdated(el,binding){ //钩子函数：componentUpdated 是指令所在组件的Vnode 及其子Vnode全部更新后调用
      //el binding 是钩子函数的参数 其中el是指令所绑定的元素，可以直接操作DOM
      //binding 是一个对象 包括name(指令名) value(指令的绑定值)
      if(binding.value){//洗牌的效果 
		   let temloca = document.querySelectorAll(".card-item")[4];//获取第五张牌的位置
		   let top = temloca.offsetTop;
		   let left = temloca.offsetLeft;
		   
		   //当前元素的坐标
		   let currTop = el.offsetTop;
		   let currLeft = el.offsetLeft;
			
			//相对像素差 也就是每个卡片移到中间（第五张卡片的位置）要移动的距离
			let disTop = top - currTop;
			let disLeft - left - currLeft;
			el.style.transform = `translate(${disTop}px,${disLeft}px)`;
			el.style.zIndex = Math.floor(Math.random()*9); //往中间插的时候随机插入
		}else{
				el.style.transform = `none`; //如果绑定值为false 就清空移动样式 也就完成了发牌的功能
			}
      }
   }
   }

自定义组件的使用 只要在view中用 v-trans绑定就可以了

最后还有一个小问题 就是发牌手牌不想要一块发出一块收回 想要按顺序一个一个来
拿着就要为这个view 动态绑定一个style

<view class="card-item" v-for="list in 9" :key="list" :style="{transitionDelay:`${list}*0.2`}s"></view>
//因为每一个卡片移动的时间是0.2s