├── App.vue
├── README.md
├── components
    └── cl-cardDel
    │   └── cl-cardDel.js
├── main.js
├── manifest.json
├── pages.json
├── pages
    ├── index
    │   └── index.vue
    ├── qzone
    │   └── index.vue
    └── tantan
    │   ├── card-box.vue
    │   └── index.vue
├── static
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    └── logo.png
└── uni.scss


/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export default {
 3 | 		onLaunch: function() {
 4 | 			console.log('App Launch')
 5 | 		},
 6 | 		onShow: function() {
 7 | 			console.log('App Show')
 8 | 		},
 9 | 		onHide: function() {
10 | 			console.log('App Hide')
11 | 		}
12 | 	}
13 | </script>
14 | 
15 | <style>
16 | 	/*每个页面公共css */
17 | </style>
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cardDel
 2 | 
 3 | 卡片删除效果(仿探探)
 4 | 
 5 | # 说明
 6 | 
 7 | 插件设计: 插件不仅仅可以实现仿探探的效果，还能通过参数实现卡片不同的动画效果的变化。
 8 | 
 9 | 基本模板里提供了简单的动画效果。
10 | 
11 | 
12 | ## 使用方式
13 | 
14 | **在index.js中**  
15 | 
16 | ~~~
17 | import clCardDel from "@/components/cl-cardDel/cl-cardDel";
18 | mixins:[clCardDel]
19 | ~~~
20 | 
21 | ## OBJECT参数说明
22 | 
23 | | 参数 | 类型 | 默认值 | 说明 |
24 | | --- | --- | --- | --- |
25 | | number | Number | 2 | 存在的卡片数量 |
26 | | moveRotate | Object | { x:0,y:0 } | 设置位移图片旋转角度距离  card中心点 - 指向坐标 |
27 | | delMoveD | Number | screenHeight*2 | 删除移动距离 |
28 | | touchMoveD | Number | 100 | card移动距离 card移动距离/touchMoveD = 其他card变化比率 |
29 | | rotate | Number | 0 | 第2张卡片旋转角度 |
30 | | scale | Object | { x:1,y:1 } | 第2张卡片缩放 |
31 | | skew | Object | { x:0,y:0 } | 第2张卡片倾斜 |
32 | | translate | Object | { x:0,y:0 } | 第2张卡片位移 |
33 | | opacity | Number | 1 | 第2张卡片透明度 |
34 | 
35 | ## 事件
36 | 
37 | | 事件名 | 说明 |
38 | | ---  | --- |
39 | | init | 设置初始参数 |
40 | | getData | 获取数据 |
41 | | moveJudge(x,y,ratio) | 触摸中判断 |
42 | | endJudge(x,y) | 触摸结束判断 |
43 | | _back | 执行回退动画 |
44 | | _del | 执行删除动画 |
45 | 
46 | ## 如果觉得插件不错，麻烦给个好评
47 | 


--------------------------------------------------------------------------------
/components/cl-cardDel/cl-cardDel.js:
--------------------------------------------------------------------------------
  1 | export default { 
  2 | 	data(){
  3 | 		return{
  4 | 			number:2, //展示卡片数量，同时设置animationData对象
  5 | 			moveRotate:{ x:0,y:0 }, //设置位移图片旋转角度距离  card中心点 - 指向坐标
  6 | 			delMoveD: uni.getSystemInfoSync().screenHeight,//设置删除移动距离
  7 | 			touchMoveD: 100,//设置card移动距离,   card移动距离/touchMoveD = 其他card变化比率
  8 | 			rotate:0, //旋转deg 设置第2张卡片transform opacity
  9 | 			scale:{ x:1,y:1 }, //缩放
 10 | 			skew:{ x:0,y:0 }, //倾斜px
 11 | 			translate:{ x:0,y:0 }, //位移px
 12 | 			opacity:1,  //透明度，参数范围 0~1
 13 | 			type:false, //是否拥有两套代码
 14 | 			
 15 | 			
 16 | 			moveX:0, //记录移动值
 17 | 			moveY:0, //
 18 | 			oldTouces:{},
 19 | 			oldMove:{},
 20 | 			touchAnimation:null,
 21 | 			animationData:{}, 
 22 | 			dataList:[],
 23 | 			delTime:150,
 24 | 			cardId:0,
 25 | 			x:0,
 26 | 			y:0,
 27 | 			sysHeight:0,
 28 | 			sysWidth:0,
 29 | 			delFlag:false, //app下禁止快速滑动150ms
 30 | 		}
 31 | 	},
 32 | 	created() {
 33 | 		this.init()
 34 | 		this.sysHeight = uni.getSystemInfoSync().windowHeight
 35 | 		this.sysWidth = uni.getSystemInfoSync().windowWidth
 36 | 	},
 37 | 	async mounted() {
 38 | 		
 39 | 		this.createAnimation()
 40 | 		await this.getData()
 41 | 	},
 42 | 	methods:{
 43 | 		//初始值设置
 44 | 		init(){
 45 | 			
 46 | 		},
 47 | 		//获取数据
 48 | 		getData(){
 49 | 			
 50 | 		},
 51 | 		createAnimation(){
 52 | 			//touch移动动画
 53 | 			this.touchAnimation = uni.createAnimation({
 54 | 				duration:0
 55 | 			});
 56 | 			//其他卡片移动
 57 | 			this.moveAnimation = uni.createAnimation({
 58 | 				duration:0
 59 | 			});
 60 | 			//删除动画
 61 | 			this.delanimation = uni.createAnimation({
 62 | 				duration:this.delTime,
 63 | 				
 64 | 			});
 65 | 			//删除时其他card动画
 66 | 			this.endanimation = uni.createAnimation({
 67 | 				duration:200
 68 | 			});
 69 | 		},
 70 | 		touchStart(e){
 71 | 		
 72 | 			this.oldTouces = e.touches[0]
 73 | 			
 74 | 		},
 75 | 		touchMove(e) {
 76 | 			
 77 | 			if(this.delFlag) return
 78 | 			
 79 | 			
 80 | 			let { oldTouces } = this
 81 | 			
 82 | 			
 83 | 			let newTouces = e.touches[0]
 84 | 			//平移
 85 | 			this.moveX = newTouces.clientX-oldTouces.clientX
 86 | 			this.moveY = newTouces.clientY-oldTouces.clientY
 87 | 			this.dataList[0].moveX = this.moveX
 88 | 			this.dataList[0].moveY = this.moveY
 89 | 			
 90 | 			this.dataList[0].animation = false
 91 | 			//移动图片旋转角度
 92 | 			let angle = this.calcAngleDegrees(this.moveX- this.moveRotate.x,this.moveY- this.moveRotate.y )
 93 | 			
 94 | 			//移动card动画
 95 | 			if(this.type){
 96 | 				//#ifdef APP-PLUS
 97 | 				this.touchAnimation.translateX(this.moveX).translateY(this.moveY).rotate(angle).step();
 98 | 				//#endif
 99 | 				//#ifndef APP-PLUS
100 | 				this.touchAnimation.rotate(angle).step();
101 | 				//#endif
102 | 			}else{
103 | 				this.touchAnimation.rotate(angle).step();
104 | 			}
105 | 			
106 | 			
107 | 			
108 | 			
109 | 			
110 | 			this.animationData[0] = this.touchAnimation.export()
111 | 			
112 | 			//其他card动画
113 | 			let d = this.moveX*this.moveX + this.moveY*this.moveY
114 | 			let ratio = Math.sqrt(d) / this.touchMoveD 
115 | 			ratio = ratio > 1 ? 1 : ratio
116 | 			
117 | 			for (var i = 1; i < this.number; i++) {
118 | 				
119 | 				if(this.rotate!=0) this.moveAnimation.rotate( this.rotate*(i-ratio) )
120 | 				if(this.opacity!=1) this.moveAnimation.opacity( 1-(1-this.opacity)*(i-ratio) )
121 | 				if(this.scale.x!=1) this.moveAnimation.scaleX( 1-(1-this.scale.x)*(i-ratio) )
122 | 				if(this.scale.y!=1) this.moveAnimation.scaleY( 1-(1-this.scale.y)*(i-ratio) )
123 | 				if(this.skew.x!=0) this.moveAnimation.skewX( this.skew.x*(i-ratio) )
124 | 				if(this.skew.y!=0) this.moveAnimation.skewY( this.skew.y*(i-ratio) )
125 | 				if(this.translate.x!=0) this.moveAnimation.translateX( this.translate.x*(i-ratio) )
126 | 				if(this.translate.y!=0) this.moveAnimation.translateY( this.translate.y*(i-ratio) )
127 | 				
128 | 				this.moveAnimation.step()
129 | 				this.animationData[i] = this.moveAnimation.export()
130 | 			}
131 | 			//触摸中视图变化
132 | 			this.moveJudge(this.moveX,this.moveY,ratio)
133 | 		},
134 | 		touchend(e){
135 | 			
136 | 			this.endJudge(this.moveX,this.moveY)
137 | 			
138 | 		},
139 | 		//触摸中判断
140 | 		moveJudge(x,y,ratio){
141 | 			
142 | 		},
143 | 		//触摸结束判断
144 | 		endJudge(x,y){
145 | 			if(x!=0||y!=0){
146 | 				this._del()
147 | 			}
148 | 		},
149 | 		//返回card
150 | 		_back(){
151 | 			
152 | 			let { oldMove } = this
153 | 			//移动图片旋转角度
154 | 			let angle = this.calcAngleDegrees(this.moveX- this.moveRotate.x,this.moveY- this.moveRotate.y )
155 | 			//移动card动画
156 | 			
157 | 			if(this.type){
158 | 				//#ifdef APP-PLUS
159 | 				this.delanimation.translateX(-this.moveX/3).translateY(-this.moveY/3).rotate(0).step();
160 | 				//#endif
161 | 
162 | 			}else{
163 | 				
164 | 			}
165 | 			
166 | 			
167 | 			this.moveX = 0
168 | 			this.moveY = 0
169 | 			this.dataList[0].moveX = 0
170 | 			this.dataList[0].moveY = 0
171 | 			this.dataList[0].animation = true
172 | 			this.delanimation.translateX(this.moveX).translateY(this.moveY).rotate(0).step();
173 | 			this.animationData[0] = this.delanimation.export()
174 | 			setTimeout(() => {
175 | 				//清除动画
176 | 				this.animationData[0] = this.delanimation.export()
177 | 				for (var i = 1; i < this.number; i++) {
178 | 					this.animationData[i] = this.moveAnimation.export()
179 | 				}
180 | 				this.moveX = 0
181 | 				this.moveY = 0
182 | 			}, this.delTime)
183 | 			
184 | 			//其他card动画
185 | 			let ratio = 0
186 | 			
187 | 			for (var i = 1; i < this.number; i++) {
188 | 				
189 | 				if(this.rotate!=0) this.endanimation.rotate( this.rotate*(i-ratio) )
190 | 				if(this.opacity!=1) this.endanimation.opacity( 1-(1-this.opacity)*(i-ratio) )
191 | 				if(this.scale.x!=1) this.endanimation.scaleX( 1-(1-this.scale.x)*(i-ratio) )
192 | 				if(this.scale.y!=1) this.endanimation.scaleY( 1-(1-this.scale.y)*(i-ratio) )
193 | 				if(this.skew.x!=0) this.endanimation.skewX( this.skew.x*(i-ratio) )
194 | 				if(this.skew.y!=0) this.endanimation.skewY( this.skew.y*(i-ratio) )
195 | 				if(this.translate.x!=0) this.endanimation.translateX( this.translate.x*(i-ratio) )
196 | 				if(this.translate.y!=0) this.endanimation.translateY( this.translate.y*(i-ratio) )
197 | 				
198 | 				this.endanimation.step()
199 | 				this.animationData[i] = this.endanimation.export()
200 | 			}
201 | 		},
202 | 		//删除card
203 | 		_del(){
204 | 			if(this.type) {
205 | 				//#ifdef APP-PLUS
206 | 				this.delFlag = true
207 | 				//#endif
208 | 			}
209 | 			
210 | 			
211 | 			//移动card动画
212 | 			let d = this.moveX*this.moveX + this.moveY*this.moveY
213 | 			let y = this.moveY*this.delMoveD/Math.sqrt(d)
214 | 			let x = this.moveX*this.delMoveD/Math.sqrt(d)
215 | 			this.delanimation.translateX(x).translateY(y).step();
216 | 			this.animationData[0] = this.delanimation.export()
217 | 			setTimeout(() => {
218 | 				
219 | 				//清除动画
220 | 				this.animationData[0] = this.delanimation.export()
221 | 				for (var i = 1; i < this.number; i++) {
222 | 					this.animationData[i] = this.moveAnimation.export()
223 | 				}
224 | 				
225 | 				this.delCard(this.moveX,this.moveY)
226 | 				this.moveX = 0
227 | 				this.moveY = 0
228 | 				this.dataList[0].moveX = 0
229 | 				this.dataList[0].moveY = 0
230 | 				this.dataList.splice(0,1)
231 | 				if(this.dataList.length<=this.number) this.getData()
232 | 				if(this.type) {
233 | 					//#ifdef APP-PLUS
234 | 					this.delFlag = false
235 | 					//#endif
236 | 				}
237 | 			}, this.delTime)
238 | 			
239 | 			//其他card动画
240 | 			let ratio = 1
241 | 			
242 | 			for (var i = 1; i < this.number; i++) {
243 | 				
244 | 				if(this.rotate!=0) this.endanimation.rotate( this.rotate*(i-ratio) )
245 | 				if(this.opacity!=1) this.endanimation.opacity( 1-(1-this.opacity)*(i-ratio) )
246 | 				if(this.scale.x!=1) this.endanimation.scaleX( 1-(1-this.scale.x)*(i-ratio) )
247 | 				if(this.scale.y!=1) this.endanimation.scaleY( 1-(1-this.scale.y)*(i-ratio) )
248 | 				if(this.skew.x!=0) this.endanimation.skewX( this.skew.x*(i-ratio) )
249 | 				if(this.skew.y!=0) this.endanimation.skewY( this.skew.y*(i-ratio) )
250 | 				if(this.translate.x!=0) this.endanimation.translateX( this.translate.x*(i-ratio) )
251 | 				if(this.translate.y!=0) this.endanimation.translateY( this.translate.y*(i-ratio) )
252 | 				
253 | 				this.endanimation.step()
254 | 				this.animationData[i] = this.endanimation.export()
255 | 			}
256 | 		},
257 | 		delCard(){
258 | 			console.log(this.dataList[0])
259 | 		},
260 | 		calcAngleDegrees(x, y) {
261 | 			return Math.atan2(y, x) * 180 / Math.PI + 90;
262 | 		}
263 | 	},
264 | 	watch:{
265 | 			
266 | 			
267 | 			
268 | 	},
269 | 	watch:{
270 | 		number:{
271 | 			immediate:true,
272 | 			handler(newVal,oldVal){
273 | 				for (var i = 0; i < newVal; i++) {
274 | 					let a = {}
275 | 					a[i] = {}
276 | 					this.animationData = {...this.animationData,...a}
277 | 				}
278 | 			}
279 | 		},
280 | 		dataList:{
281 | 			handler(newVal,oldVal){
282 | 				for (let item of newVal) {
283 | 					if(!item._id){
284 | 						item._id = this.cardId++
285 | 						item.moveX = 0
286 | 						item.moveY = 0
287 | 						item.animation = false
288 | 					} 
289 | 				}
290 | 				
291 | 			}
292 | 		}
293 | 	}
294 | }
295 | 
296 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | App.mpType = 'app'
 7 | 
 8 | const app = new Vue({
 9 |     ...App
10 | })
11 | app.$mount()
12 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "cardDel",
 3 |     "appid" : "",
 4 |     "description" : "",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "transformPx" : false,
 8 |     /* 5+App特有相关 */
 9 |     "app-plus" : {
10 |         "usingComponents" : true,
11 |         "nvueCompiler" : "uni-app",
12 |         "splashscreen" : {
13 |             "alwaysShowBeforeRender" : true,
14 |             "waiting" : true,
15 |             "autoclose" : true,
16 |             "delay" : 0
17 |         },
18 |         /* 模块配置 */
19 |         "modules" : {},
20 |         /* 应用发布信息 */
21 |         "distribute" : {
22 |             /* android打包配置 */
23 |             "android" : {
24 |                 "permissions" : [
25 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
26 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
27 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
28 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
29 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
30 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
31 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
32 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
33 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
34 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
35 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
36 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
37 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
38 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
39 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
40 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
41 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
42 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
43 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
44 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
45 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
46 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
47 |                 ]
48 |             },
49 |             /* ios打包配置 */
50 |             "ios" : {},
51 |             /* SDK配置 */
52 |             "sdkConfigs" : {}
53 |         }
54 |     },
55 |     /* 快应用特有相关 */
56 |     "quickapp" : {},
57 |     /* 小程序特有相关 */
58 |     "mp-weixin" : {
59 |         "appid" : "",
60 |         "setting" : {
61 |             "urlCheck" : false
62 |         },
63 |         "usingComponents" : true
64 |     },
65 |     "mp-alipay" : {
66 |         "usingComponents" : true
67 |     },
68 |     "mp-baidu" : {
69 |         "usingComponents" : true
70 |     },
71 |     "mp-toutiao" : {
72 |         "usingComponents" : true
73 |     }
74 | }
75 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 3 | 		{
 4 | 			"path": "pages/index/index",
 5 | 			"style": {
 6 | 				"navigationBarTitleText": "基本模板"
 7 | 			}
 8 | 		},
 9 | 		{
10 | 			"path": "pages/qzone/index",
11 | 			"style": {
12 | 				"navigationBarTitleText": "qq空间"
13 | 			}
14 | 		},
15 | 		{
16 | 			"path": "pages/tantan/index",
17 | 			"style": {
18 | 				"navigationBarTitleText": "探探"
19 | 				
20 | 			}
21 | 		}
22 | 	],
23 | 	"globalStyle": {
24 | 		"navigationBarTextStyle": "black",
25 | 		"navigationBarTitleText": "uni-app",
26 | 		"navigationBarBackgroundColor": "#F8F8F8",
27 | 		"backgroundColor": "#F8F8F8"
28 | 	},
29 | 	"tabBar": {
30 | 		"color": "#333333",
31 | 		"backgroundColor": "#F8F8F8",
32 | 		"selectedColor": "#00B26A",
33 | 		"list": [
34 | 			{
35 | 				"pagePath": "pages/index/index",
36 | 				"text": "基本模板"
37 | 			},
38 | 			{
39 | 				"pagePath": "pages/qzone/index",
40 | 				"text": "qq空间"
41 | 			},
42 | 			{
43 | 				"pagePath": "pages/tantan/index",
44 | 				"text": "探探"
45 | 			}
46 | 		]
47 | 	}
48 | }
49 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="page" :style="{height:`${sysHeight}px`,width:`${sysWidth}px`}">
  3 | 		<movable-area class="move-area" :style="{height:`${3*sysHeight}px`,width:`${3*sysWidth}px`,top:`${-sysHeight}px`,left:`${-sysWidth}px` }">
  4 | 				<movable-view
  5 | 					id="move"
  6 | 					class="move-view"
  7 | 					v-for="(item,index) in dataList"
  8 | 					:key="item._id"
  9 | 					:style="{zIndex:`${99999-item._id}`}"
 10 | 					direction="all"
 11 | 					:x="item.moveX"
 12 | 					:y="item.moveY"
 13 | 					out-of-bounds
 14 | 					v-if="index<=number"
 15 | 					:disabled="index!=0"
 16 | 					:animation="item.animation"
 17 | 					@touchend="touchend"
 18 | 					@touchmove="touchMove"
 19 | 					@touchstart="touchStart"
 20 | 				>
 21 | 					<view class="cardBox"
 22 | 						:animation="animationData[index]"
 23 | 						:style="{transform:index<number?`rotate(${rotate*index}deg) scale(${ 1-(1-scale.x)*index },${ 1-(1-scale.y)*index }) skew(${skew.x*index}deg, ${skew.y*index}deg) translate(${translate.x*index}px, ${translate.y*index}px)`:`rotate(${rotate*(number-1)}deg) scale(${ 1-(1-scale.x)*(number-1) },${ 1-(1-scale.y)*(number-1) }) skew(${skew.x*(number-1)}deg, ${skew.y*(number-1)}deg) translate(${translate.x*(number-1)}px, ${translate.y*(number-1)}px)`,opacity:index<number?`${ 1-(1-opacity)*index }`:`${ 1-(1-opacity)*(number-1) }`}"
 24 | 						
 25 | 					>
 26 | 					{{item.id}}
 27 | 					</view>
 28 | 			</movable-view>
 29 | 		</movable-area>
 30 | 	</view>
 31 | </template>
 32 | 
 33 | <script>
 34 | 	import clCardDel from "@/components/cl-cardDel/cl-cardDel";
 35 | 	export default{ 
 36 | 		mixins:[clCardDel],
 37 | 		data(){
 38 | 			return{
 39 | 				
 40 | 			}
 41 | 		},
 42 | 		mounted() {
 43 | 			
 44 | 		},
 45 | 		methods:{
 46 | 			//设置初始参数
 47 | 			init(){
 48 | 				this.number = 4 //card 4
 49 | 				
 50 | 				//设置第2张卡片transform opacity
 51 | 				
 52 | 				this.translate = { x:0,y:50 } //y下移10px
 53 | 				this.scale = { x:0.9,y:1 }, //x 缩小0.9
 54 | 				this.rotate = 10 //旋转deg 
 55 | 				this.skew = { x:20,y:0 }, //倾斜px
 56 | 				this.opacity = 0.95  //透明度，参数范围 0~1
 57 | 				this.moveRotate = { //设置位移图片旋转角度距离  指向坐标 - card中心点 
 58 | 					x:0,
 59 | 					y:uni.getSystemInfoSync().screenHeight ,
 60 | 				}
 61 | 			},
 62 | 			//设置获取数据
 63 | 			getData(){
 64 | 				let promise = new Promise((resolve,reject)=>{
 65 | 					for (var i = 0; i < 10; i++) {
 66 | 						this.dataList.push({id:i})
 67 | 					}
 68 | 					resolve()
 69 | 				}) 
 70 | 				return promise
 71 | 			}
 72 | 		}
 73 | 		
 74 | 	}
 75 | </script>
 76 | 
 77 | <style lang="scss" scoped>
 78 | 	.page{
 79 | 		width: 100%;
 80 | 		position: absolute;
 81 | 		overflow: hidden;
 82 | 		display: flex;
 83 | 		align-items: center;
 84 | 		justify-content: center;
 85 | 	}
 86 | 	.move-area{
 87 | 		position: absolute;
 88 | 	}
 89 | 	.move-view{
 90 | 		width: 300rpx;
 91 | 		height: 400rpx;
 92 | 		left: 50%;
 93 | 		top: 50%;
 94 | 		margin-left: -150rpx;
 95 | 		margin-top: -500rpx;
 96 | 	}
 97 | 	.cardBox{
 98 | 		
 99 | 		background-color: #FFFFFF;
100 | 		position:absolute;
101 | 		width: 300rpx;
102 | 		height: 400rpx;
103 | 		border-radius: 20rpx;
104 | 		border: 2px solid #e9e7ef;
105 | 		display: flex;
106 | 		justify-content: center;
107 | 		align-items: center;
108 | 		font-size: 20px;
109 | 		
110 | 	}
111 | 	
112 | 	
113 | 	
114 | </style>
115 | 


--------------------------------------------------------------------------------
/pages/qzone/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="page" :style="{height:`${sysHeight}px`,width:`${sysWidth}px`}">
  3 | 		<movable-area class="move-area" :style="{height:`${3*sysHeight}px`,width:`${3*sysWidth}px`,top:`${-sysHeight}px`,left:`${-sysWidth}px` }">
  4 | 				<movable-view
  5 | 					id="move"
  6 | 					class="move-view"
  7 | 					v-for="(item,index) in dataList"
  8 | 					:key="item._id"
  9 | 					:style="{zIndex:`${99999-item._id}`}"
 10 | 					direction="all"
 11 | 					:x="item.moveX"
 12 | 					:y="item.moveY"
 13 | 					out-of-bounds
 14 | 					v-if="index<=number"
 15 | 					:disabled="index!=0"
 16 | 					:animation="item.animation"
 17 | 					@touchend="touchend"
 18 | 					@touchmove="touchMove"
 19 | 					@touchstart="touchStart"
 20 | 				>
 21 | 					<view class="cardBox"
 22 | 						:animation="animationData[index]"
 23 | 						:style="{transform:index<number?`rotate(${rotate*index}deg) scale(${ 1-(1-scale.x)*index },${ 1-(1-scale.y)*index }) skew(${skew.x*index}deg, ${skew.y*index}deg) translate(${translate.x*index}px, ${translate.y*index}px)`:`rotate(${rotate*(number-1)}deg) scale(${ 1-(1-scale.x)*(number-1) },${ 1-(1-scale.y)*(number-1) }) skew(${skew.x*(number-1)}deg, ${skew.y*(number-1)}deg) translate(${translate.x*(number-1)}px, ${translate.y*(number-1)}px)`,opacity:index<number?`${ 1-(1-opacity)*index }`:`${ 1-(1-opacity)*(number-1) }`}"
 24 | 						
 25 | 					>
 26 | 						<image class="img" :src="item.src"></image>
 27 | 						<view class="content">{{item.name}}</view>
 28 | 						<view class="right">
 29 | 							<view class="check" @tap="tapCard(item)">查看</view>
 30 | 						</view>
 31 | 						<view class="right-del" @tap="tapDelCard">x</view>
 32 | 						<view class="right-circle"></view>
 33 | 					</view>
 34 | 			</movable-view>
 35 | 			<movable-view id="move" class="move-view" :style="{zIndex:`0`}" disabled>
 36 | 				<view class="cardBox" :style="{transform:`scale(0.95,0.95)`}">
 37 | 					
 38 | 				</view>
 39 | 			</movable-view>
 40 | 		</movable-area>
 41 | 	</view>
 42 | </template>
 43 | 
 44 | <script>
 45 | 	import clCardDel from "@/components/cl-cardDel/cl-cardDel";
 46 | 	export default{ 
 47 | 		mixins:[clCardDel],
 48 | 		data(){
 49 | 			return{
 50 | 				
 51 | 			}
 52 | 		},
 53 | 		methods:{
 54 | 			//设置初始参数
 55 | 			init(){
 56 | 				this.number = 2 //card 2
 57 | 				//设置第2张卡片transform opacity
 58 | 				this.rotate = 5 //旋转deg 
 59 | 				this.scale = { x:0.95,y:0.95 } //x 缩小0.9
 60 | 			},
 61 | 			//设置获取数据
 62 | 			getData(){
 63 | 				let promise = new Promise((resolve,reject)=>{
 64 | 					let dataGroup = []
 65 | 					for (var i = 1; i < 6; i++) {
 66 | 						dataGroup.push({
 67 | 							src:`../../static/${i}.jpg`,
 68 | 							sex:Math.round(Math.random()),
 69 | 							address:'杭州(100km)',
 70 | 							name:'可爱的小姐姐',
 71 | 							constellation:'双鱼座',
 72 | 							number:10,
 73 | 							old:18
 74 | 						})
 75 | 					}
 76 | 					this.dataList = [...this.dataList,...dataGroup]
 77 | 					resolve()
 78 | 				}) 
 79 | 				return promise
 80 | 			},
 81 | 			tapCard(item){
 82 | 				console.log(item,"点击")
 83 | 			},
 84 | 			tapDelCard(){
 85 | 				this._del()
 86 | 			}
 87 | 		}
 88 | 		
 89 | 	}
 90 | </script>
 91 | 
 92 | <style lang="scss" scoped>
 93 | 	.page{
 94 | 		width: 100%;
 95 | 		position: absolute;
 96 | 		overflow: hidden;
 97 | 		display: flex;
 98 | 		align-items: center;
 99 | 		justify-content: center;
100 | 	}
101 | 	.move-area{
102 | 		position: absolute;
103 | 	}
104 | 	.move-view{
105 | 		width: 600rpx;
106 | 		height: 200rpx;
107 | 		left: 50%;
108 | 		top: 50%;
109 | 		margin-left: -300rpx;
110 | 		margin-top: -500rpx;
111 | 	}
112 | 	.cardBox{
113 | 		background-color: #FFFFFF;
114 | 		position:absolute;
115 | 		width: 600rpx;
116 | 		height: 200rpx;
117 | 		border-radius: 20rpx;
118 | 		border: 1px solid #F8F8F8;
119 | 		box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
120 | 		display: flex;
121 | 		justify-content: space-between;
122 | 		align-items: center;
123 | 		font-size: 12px;
124 | 		overflow: hidden;
125 | 		padding:0 20upx;
126 | 		.img{
127 | 			height: 140rpx;
128 | 			width: 140rpx;
129 | 			border-radius: 50%;
130 | 		}
131 | 		.right-circle{
132 | 			position:absolute;
133 | 			width: 100upx;
134 | 			height: 100upx;
135 | 			border-radius: 50%;
136 | 			background-color: #FCF3CC;
137 | 			right:30upx;
138 | 			bottom: -60upx;
139 | 		}
140 | 		.check{
141 | 			width: 110upx;
142 | 			height: 70upx;
143 | 			border-radius: 35rpx;
144 | 			background-color:#00CAFC;
145 | 			color: #fff;
146 | 			display: flex;
147 | 			justify-content: center;
148 | 			align-items: center;
149 | 			font-size: 14px;
150 | 		}
151 | 		.right-del{
152 | 			color: #A8A8A8;
153 | 			position:absolute;
154 | 			font-size: 15px;
155 | 			right:20upx;
156 | 			top: 10upx;
157 | 		}
158 | 	}
159 | 	
160 | 	
161 | 	
162 | </style>
163 | 


--------------------------------------------------------------------------------
/pages/tantan/card-box.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="cardBox">
  3 | 		<view class="top">
  4 | 			<view class="img-top">
  5 | 				<view class="img-left">
  6 | 					<view class="img-number"><view class="iconfont icon-tupian1 tupian"></view> {{number}}</view>
  7 | 					<view class="img-zou"><view class="iconfont icon-genwozou genwozou"></view> 擦肩而过1次</view>
  8 | 				</view>
  9 | 				<view class="img-right">
 10 | 					<view class="iconfont icon-v"></view>
 11 | 				</view>
 12 | 			</view>
 13 | 			<view class="love" :animation="loveAnimation[0]">
 14 | 				<view class="iconfont icon-xinaixin" :style="{fontSize:'60rpx'}"></view>
 15 | 			</view>
 16 | 			<view class="loathe" :animation="loatheAnimation[0]">
 17 | 				<view class="iconfont icon-chacha1" :style="{fontSize:'60rpx'}"></view>
 18 | 			</view>
 19 | 			<image class="img" :src="src"></image>
 20 | 		</view>
 21 | 		
 22 | 		<view class="bottom">
 23 | 			<view class="star">
 24 | 				<view class="iconfont icon-wujiaoxing1" :style="{fontSize:'60rpx'}"></view>
 25 | 			</view>
 26 | 			<view>{{name}}</view>
 27 | 			<view class="labelBox">
 28 | 				<view class="label" :style="{backgroundColor:sex==0?'#7BD8FF':'#F3C9F5'}">
 29 | 					<view class="iconfont sex" :class="sex==0?'icon-male':'icon-xingbie-nv'" :style="{fontSize:'16px' }"></view> {{old}}</view>
 30 | 				<view class="label" :style="{backgroundColor:'#A4C742'}">{{constellation}}</view>
 31 | 			</view>
 32 | 			<view class="address">{{address}}</view>
 33 | 		</view>
 34 | 	</view>
 35 | </template>
 36 | 
 37 | <script>
 38 | 	export default{ 
 39 | 		props:{
 40 | 			src:{
 41 | 				type:String,
 42 | 				default:''
 43 | 			},
 44 | 			number:{
 45 | 				type:Number,
 46 | 				default:0
 47 | 			},
 48 | 			name:{
 49 | 				type:String,
 50 | 				default:''
 51 | 			},
 52 | 			sex:{
 53 | 				type:Number,
 54 | 				default:0
 55 | 			},
 56 | 			constellation:{
 57 | 				type:String,
 58 | 				default:''
 59 | 			},
 60 | 			address:{
 61 | 				type:String,
 62 | 				default:''
 63 | 			},
 64 | 			old:{
 65 | 				type:Number,
 66 | 				default:18
 67 | 			}
 68 | 		},
 69 | 		data(){
 70 | 			return{
 71 | 				loveAnimation:{0:{}},
 72 | 				loatheAnimation:{0:{}},
 73 | 				loveAni:null,
 74 | 				loatheAni:null
 75 | 			}
 76 | 		},
 77 | 		mounted() {
 78 | 			//touch移动喜欢动画
 79 | 			this.loveAni = uni.createAnimation({
 80 | 				duration:0
 81 | 			});
 82 | 			//touch移动不喜欢动画
 83 | 			this.loatheAni = uni.createAnimation({
 84 | 				duration:0
 85 | 			});
 86 | 		},
 87 | 		methods:{
 88 | 			clearAnimation(){
 89 | 				this.loveAnimation[0] = this.loveAni.export()
 90 | 				this.loatheAnimation[0] = this.loatheAni.export()
 91 | 			},
 92 | 			_back(){
 93 | 				//touch移动喜欢动画
 94 | 				this.loveAni = uni.createAnimation({
 95 | 					duration:200
 96 | 				});
 97 | 				//touch移动不喜欢动画
 98 | 				this.loatheAni = uni.createAnimation({
 99 | 					duration:200
100 | 				});
101 | 				this.loveAni.opacity( 0 ).step()
102 | 				this.loveAnimation[0] = this.loveAni.export()
103 | 				this.loatheAni.opacity( 0 ).step()
104 | 				this.loatheAnimation[0] = this.loatheAni.export()
105 | 			},
106 | 			moveRight(ratio){
107 | 				this.loveAni.opacity( 0.3 + 0.7*ratio ).step()
108 | 				this.loveAnimation[0] = this.loveAni.export()
109 | 				this.loatheAni.opacity( 0 ).step()
110 | 				this.loatheAnimation[0] = this.loatheAni.export()
111 | 			},
112 | 			moveLeft(ratio){
113 | 				this.loveAni.opacity( 0 ).step()
114 | 				this.loveAnimation[0] = this.loveAni.export()
115 | 				this.loatheAni.opacity( 0.3 + 0.7*ratio ).step()
116 | 				this.loatheAnimation[0] = this.loatheAni.export()
117 | 			},
118 | 			moveCenter(){
119 | 				this.loveAni.opacity( 0.3 ).step()
120 | 				this.loveAnimation[0] = this.loveAni.export()
121 | 				this.loatheAni.opacity( 0.3 ).step()
122 | 				this.loatheAnimation[0] = this.loatheAni.export()
123 | 			}
124 | 		},
125 | 		watch:{
126 | 			cardData(newVal){
127 | 				console.log(newVal)
128 | 				this.item = newVal
129 | 			}
130 | 		}
131 | 	}
132 | </script>
133 | 
134 | <style lang="scss" scoped>
135 | 	@font-face {font-family: "iconfont";
136 | 	  src:  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
137 | 	}
138 | 	
139 | 	.iconfont {
140 | 	  font-family: "iconfont" !important;
141 | 	  font-size: 12px;
142 | 	  font-style: normal;
143 | 	  -webkit-font-smoothing: antialiased;
144 | 	  -moz-osx-font-smoothing: grayscale;
145 | 	}
146 | 	
147 | 	
148 | 	.icon-v:before {
149 | 	  content: "\e670";
150 | 	}
151 | 	
152 | 	.icon-male:before {
153 | 	  content: "\e600";
154 | 	}
155 | 	
156 | 	.icon-wujiaoxing1:before {
157 | 	  content: "\e602";
158 | 	}
159 | 	
160 | 	.icon-chacha1:before {
161 | 	  content: "\e646";
162 | 	}
163 | 	
164 | 	.icon-genwozou:before {
165 | 	  content: "\e61d";
166 | 	}
167 | 	
168 | 	.icon-xinaixin:before {
169 | 	  content: "\e601";
170 | 	}
171 | 	
172 | 	.icon-tupian1:before {
173 | 	  content: "\e718";
174 | 	}
175 | 	
176 | 	.icon-xingbie-nv:before {
177 | 	  content: "\e677";
178 | 	}
179 | 	
180 | 	
181 | 	.cardBox{
182 | 		position:relative;
183 | 		width: 100%;
184 | 		height: 100%;
185 | 		overflow: hidden;
186 | 		background-color: #fff;
187 | 		border-radius: 20rpx;
188 | 		border: 2px solid #e9e7ef;
189 | 		.top{
190 | 			width: 600rpx;
191 | 			height: 700rpx;
192 | 			.img-top{
193 | 				position: absolute;
194 | 				font-size: 12px;
195 | 				top: 20rpx;
196 | 				padding: 0 20rpx;
197 | 				display: flex;
198 | 				width: 560rpx;
199 | 				flex-direction: row;
200 | 				justify-content: space-between;
201 | 				z-index: 999;
202 | 				.img-left{
203 | 					display: flex;
204 | 					flex-direction: row;
205 | 					align-items: center;
206 | 					color: #fff;
207 | 					.img-number{
208 | 						display: flex;
209 | 						flex-direction: row;
210 | 						align-items: center;
211 | 						padding: 10rpx;
212 | 						background-color: rgba(0,0,0,0.2);
213 | 						border-radius: 10rpx;
214 | 						margin-right: 20rpx;
215 | 						.tupian{
216 | 							margin-right: 5rpx;
217 | 						}
218 | 					}
219 | 					.img-zou{
220 | 						display: flex;
221 | 						flex-direction: row;
222 | 						align-items: center;
223 | 						padding: 10rpx;
224 | 						background-color: rgba(0,0,0,0.4);
225 | 						border-radius: 10rpx;
226 | 						.genwozou{
227 | 							margin-right: 20rpx;
228 | 						}
229 | 					}
230 | 				}
231 | 				.img-right{
232 | 					width: 50rpx;
233 | 					height: 50rpx;
234 | 					border-radius: 50%;
235 | 					display: flex;
236 | 					justify-content: center;
237 | 					align-items: center;
238 | 					background-color: #54C7FC;
239 | 					color: #FFFFFF;
240 | 				}
241 | 			}
242 | 			.img{
243 | 				width: 600rpx;
244 | 				height: 700rpx;
245 | 			}
246 | 			.love{
247 | 				position: absolute;
248 | 				width: 120rpx;
249 | 				height: 120rpx;
250 | 				top: 60rpx;
251 | 				left: 40rpx;
252 | 				border-radius: 50%;
253 | 				background-color: #EA2A36;
254 | 				display: flex;
255 | 				justify-content: center;
256 | 				align-items: center;
257 | 				z-index: 999;
258 | 				color: #FFFFFF;
259 | 				opacity: 0;
260 | 			}
261 | 			.loathe{
262 | 				position: absolute;
263 | 				width: 120rpx;
264 | 				height: 120rpx;
265 | 				top: 60rpx;
266 | 				right: 40rpx;
267 | 				border-radius: 50%;
268 | 				background-color: #A09E9F;
269 | 				display: flex;
270 | 				justify-content: center;
271 | 				align-items: center;
272 | 				z-index: 999;
273 | 				color: #FFFFFF;
274 | 				opacity: 0;
275 | 			}
276 | 		}
277 | 		.bottom{
278 | 			position: relative;
279 | 			display: flex;
280 | 			padding: 10rpx 20rpx;
281 | 			flex-direction: column;
282 | 			color:#202020;
283 | 			.labelBox{
284 | 				margin-top: 10rpx;
285 | 				display: flex;
286 | 				flex-direction: row;
287 | 				.label{
288 | 					padding: 10rpx;
289 | 					font-size: 12px;
290 | 					color: #fff;
291 | 					display: flex;
292 | 					flex-direction: row;
293 | 					border-radius: 8rpx;
294 | 					margin-right: 15rpx;
295 | 				}
296 | 				.sex{
297 | 					margin-right: 5rpx;
298 | 				}
299 | 			}
300 | 			
301 | 			.address{
302 | 				margin-top: 10rpx;
303 | 				font-size: 12px;
304 | 				color: #B9B9B9;
305 | 			}
306 | 			.star{
307 | 				position: absolute;
308 | 				width: 120rpx;
309 | 				height: 120rpx;
310 | 				top: -60rpx;
311 | 				right: 50rpx;
312 | 				border-radius: 50%;
313 | 				background-image: linear-gradient(to bottom left, #87DEFF , #1FAEFF);
314 | 				display: flex;
315 | 				justify-content: center;
316 | 				align-items: center;
317 | 				
318 | 				color: #FFFFFF;
319 | 			}
320 | 		}
321 | 	}
322 | </style>
323 | 


--------------------------------------------------------------------------------
/pages/tantan/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="page" :style="{height:`${sysHeight}px`,width:`${sysWidth}px`}">
  3 | 		<!-- #ifndef APP-PLUS -->
  4 | 		<movable-area class="move-area" :style="{height:`${3*sysHeight}px`,width:`${3*sysWidth}px`,top:`${-sysHeight}px`,left:`${-sysWidth}px` }">
  5 | 				<movable-view
  6 | 					id="move"
  7 | 					class="move-view"
  8 | 					v-for="(item,index) in dataList"
  9 | 					:key="item._id"
 10 | 					:style="{zIndex:`${99999-item._id}`}"
 11 | 					direction="all"
 12 | 					:x="item.moveX"
 13 | 					:y="item.moveY"
 14 | 					out-of-bounds
 15 | 					v-if="index<=number"
 16 | 					:disabled="index!=0"
 17 | 					:animation="item.animation"
 18 | 					@tap="tapCard(item)"
 19 | 					@touchend="touchend"
 20 | 					@touchmove="touchMove"
 21 | 					@touchstart="touchStart"
 22 | 				>
 23 | 					<view class="cardBox"
 24 | 						:animation="animationData[index]"
 25 | 						:style="{transform:index<number?`rotate(${rotate*index}deg) scale(${ 1-(1-scale.x)*index },${ 1-(1-scale.y)*index }) skew(${skew.x*index}deg, ${skew.y*index}deg) translate(${translate.x*index}px, ${translate.y*index}px)`:`rotate(${rotate*(number-1)}deg) scale(${ 1-(1-scale.x)*(number-1) },${ 1-(1-scale.y)*(number-1) }) skew(${skew.x*(number-1)}deg, ${skew.y*(number-1)}deg) translate(${translate.x*(number-1)}px, ${translate.y*(number-1)}px)`,opacity:index<number?`${ 1-(1-opacity)*index }`:`${ 1-(1-opacity)*(number-1) }`}"
 26 | 						
 27 | 					>
 28 | 						<card-box :src="item.src" :number="item.number" :name="item.name" 
 29 | 							:sex="item.sex" :constellation="item.constellation" 
 30 | 							:address="item.address" :old="item.old" ref="cardBox">
 31 | 						</card-box>
 32 | 					</view>
 33 | 				</movable-view>
 34 | 		</movable-area>
 35 | 		<!-- #endif -->
 36 | 		<!-- #ifdef APP-PLUS -->
 37 | 		<view
 38 | 			v-if="index<=number"
 39 | 			class="move-view" 
 40 | 			:key="item._id"
 41 | 			@touchend="touchend" 
 42 | 			@tap="tapCard(item)"
 43 | 			v-for="(item,index) in dataList"
 44 | 			@touchmove="touchMove"
 45 | 			@touchstart="touchStart"
 46 | 			:animation="animationData[index]"
 47 | 			:style="{transform:index<number?`rotate(${rotate*index}deg) scale(${ 1-(1-scale.x)*index },${ 1-(1-scale.y)*index }) skew(${skew.x*index}deg, ${skew.y*index}deg) translate(${translate.x*index}px, ${translate.y*index}px)`:`rotate(${rotate*(number-1)}deg) scale(${ 1-(1-scale.x)*(number-1) },${ 1-(1-scale.y)*(number-1) }) skew(${skew.x*(number-1)}deg, ${skew.y*(number-1)}deg) translate(${translate.x*(number-1)}px, ${translate.y*(number-1)}px)`,zIndex:`${99999-item._id}`,opacity:index<number?`${ 1-(1-opacity)*index }`:`${ 1-(1-opacity)*(number-1) }`}"
 48 | 		>
 49 | 			<view class="cardBox">
 50 | 				<card-box :src="item.src" :number="item.number" :name="item.name"
 51 | 					:sex="item.sex" :constellation="item.constellation" 
 52 | 					:address="item.address" :old="item.old" ref="cardBox">
 53 | 				</card-box>
 54 | 			</view>
 55 | 			
 56 | 
 57 | 		</view>
 58 | 		<!-- #endif -->
 59 | 		<!-- <view class="love" >
 60 | 			<view class="iconfont icon-xinaixin" :style="{fontSize:'40rpx'}"  @tap="tapLove"></view>
 61 | 		</view>
 62 | 		<view class="loathe">
 63 | 			<view class="iconfont icon-chacha1" :style="{fontSize:'40rpx'}" @tap="tapLoathe"></view>
 64 | 		</view> -->
 65 | 	</view>
 66 | </template>
 67 | 
 68 | <script>
 69 | 	import clCardDel from "@/components/cl-cardDel/cl-cardDel";
 70 | 	import cardBox from "./card-box";
 71 | 	export default{ 
 72 | 		mixins:[clCardDel],
 73 | 		components:{cardBox},
 74 | 		data(){
 75 | 			return{
 76 | 				
 77 | 			}
 78 | 		},
 79 | 		onLoad() {
 80 | 			
 81 | 		},
 82 | 		async mounted() {
 83 | 			
 84 | 			
 85 | 			
 86 | 			
 87 | 		},
 88 | 		methods:{
 89 | 			tapLove(){
 90 | 				if(this.dataList.length==0) return
 91 | 				this.moveX = 10 //设置角度y为0水平
 92 | 				this.moveY = 1
 93 | 				this._del()
 94 | 			},
 95 | 			tapLoathe(){
 96 | 				if(this.dataList.length==0) return
 97 | 				this.moveX = -10 //设置角度
 98 | 				this.moveY = 1
 99 | 				this._del()
100 | 			},
101 | 			//设置初始参数
102 | 			init(){
103 | 				this.number = 3 //card 3
104 | 				this.translate = { x:0,y:8 } //y下移10px
105 | 				this.scale = { x:0.95,y:1 } //x 缩小0.9
106 | 				this.type = true
107 | 				
108 | 				this.moveRotate = { //设置位移图片旋转角度距离  card中心点 - 指向坐标
109 | 					x:0,
110 | 					y:uni.getSystemInfoSync().screenHeight ,
111 | 				}
112 | 			},
113 | 			//获取数据
114 | 			getData(){
115 | 				let promise = new Promise((resolve,reject)=>{
116 | 					let dataGroup = []
117 | 					for (var i = 1; i < 6; i++) {
118 | 						dataGroup.push({
119 | 							src:`../../static/${i}.jpg`,
120 | 							sex:Math.round(Math.random()),
121 | 							address:'杭州(100km)',
122 | 							name:'可爱的小姐姐',
123 | 							constellation:'双鱼座',
124 | 							number:10,
125 | 							old:18
126 | 						})
127 | 					}
128 | 					this.dataList = [...this.dataList,...dataGroup]
129 | 					resolve()
130 | 				}) 
131 | 				return promise
132 | 			},
133 | 			//触摸中判断
134 | 			moveJudge(x,y,ratio){
135 | 				let el = this.$refs.cardBox[0]
136 | 				
137 | 				if(x>20){
138 | 					el.moveRight(ratio)
139 | 					
140 | 				}else if(x<-20){
141 | 					el.moveLeft(ratio)
142 | 				}else{
143 | 					el.moveCenter()
144 | 				}
145 | 			},
146 | 			//触摸结束判断
147 | 			endJudge(x,y){
148 | 				let el = this.$refs.cardBox[0]
149 | 				if(Math.abs(x)<40){
150 | 					
151 | 					this._back()
152 | 					el._back()
153 | 				}else{
154 | 					this._del()
155 | 					el.clearAnimation()
156 | 				}
157 | 			},
158 | 			//删除card时
159 | 			delCard(x,y){
160 | 				if(x>0){
161 | 					console.log(this.dataList[0],'喜欢')
162 | 				}else{
163 | 					console.log(this.dataList[0],'不喜欢')
164 | 				}
165 | 			},
166 | 			tapCard(item){
167 | 				console.log(item,"点击")
168 | 			}
169 | 		}
170 | 		
171 | 	}
172 | </script>
173 | 
174 | 
175 | <style lang="scss" scoped>
176 | 	@font-face {font-family: "iconfont";
177 | 	  src:  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
178 | 	}
179 | 	
180 | 	.iconfont {
181 | 	  font-family: "iconfont" !important;
182 | 	  font-size: 12px;
183 | 	  font-style: normal;
184 | 	  -webkit-font-smoothing: antialiased;
185 | 	  -moz-osx-font-smoothing: grayscale;
186 | 	}
187 | 	.icon-xinaixin:before {
188 | 	  content: "\e601";
189 | 	}
190 | 	.icon-chacha1:before {
191 | 	  content: "\e646";
192 | 	}
193 | 	.page{
194 | 		width: 100%;
195 | 		position: absolute;
196 | 		overflow: hidden;
197 | 		display: flex;
198 | 		align-items: center;
199 | 		justify-content: center;
200 | 	}
201 | 	.move-area{
202 | 		position: absolute;
203 | 	}
204 | 	.move-view{
205 | 		width: 600rpx;
206 | 		position: absolute;
207 | 		height: 900rpx;
208 | 		left: 50%;
209 | 		top: 50%;
210 | 		margin-left: -300rpx;
211 | 		margin-top: -500rpx;
212 | 	}
213 | 	.cardBox{
214 | 		position:relative;
215 | 		width: 600rpx;
216 | 		height: 900rpx;
217 | 	}
218 | 	.love{
219 | 		position: absolute;
220 | 		width: 80rpx;
221 | 		height: 80rpx;
222 | 		top: 10rpx;
223 | 		left: 10rpx;
224 | 		border-radius: 50%;
225 | 		background-color: #EA2A36;
226 | 		display: flex;
227 | 		justify-content: center;
228 | 		align-items: center;
229 | 		z-index: 999;
230 | 		color: #FFFFFF;
231 | 	}
232 | 	.loathe{
233 | 		position: absolute;
234 | 		width: 80rpx;
235 | 		height: 80rpx;
236 | 		top: 10rpx;
237 | 		right: 10rpx;
238 | 		border-radius: 50%;
239 | 		background-color: #A09E9F;
240 | 		display: flex;
241 | 		justify-content: center;
242 | 		align-items: center;
243 | 		z-index: 999;
244 | 		color: #FFFFFF;
245 | 	}
246 | </style>
247 | 


--------------------------------------------------------------------------------
/static/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/15157757001/cardDel/a54c5aa01e87f150e82cf2aab6ba6563858db3a9/static/1.jpg


--------------------------------------------------------------------------------
/static/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/15157757001/cardDel/a54c5aa01e87f150e82cf2aab6ba6563858db3a9/static/2.jpg


--------------------------------------------------------------------------------
/static/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/15157757001/cardDel/a54c5aa01e87f150e82cf2aab6ba6563858db3a9/static/3.jpg


--------------------------------------------------------------------------------
/static/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/15157757001/cardDel/a54c5aa01e87f150e82cf2aab6ba6563858db3a9/static/4.jpg


--------------------------------------------------------------------------------
/static/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/15157757001/cardDel/a54c5aa01e87f150e82cf2aab6ba6563858db3a9/static/5.jpg


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/15157757001/cardDel/a54c5aa01e87f150e82cf2aab6ba6563858db3a9/static/logo.png


--------------------------------------------------------------------------------
/uni.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 这里是uni-app内置的常用样式变量
 3 |  *
 4 |  * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 5 |  * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 6 |  *
 7 |  */
 8 | 
 9 | /**
10 |  * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
11 |  *
12 |  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
13 |  */
14 | 
15 | /* 颜色变量 */
16 | 
17 | /* 行为相关颜色 */
18 | $uni-color-primary: #007aff;
19 | $uni-color-success: #4cd964;
20 | $uni-color-warning: #f0ad4e;
21 | $uni-color-error: #dd524d;
22 | 
23 | /* 文字基本颜色 */
24 | $uni-text-color:#333;//基本色
25 | $uni-text-color-inverse:#fff;//反色
26 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
27 | $uni-text-color-placeholder: #808080;
28 | $uni-text-color-disable:#c0c0c0;
29 | 
30 | /* 背景颜色 */
31 | $uni-bg-color:#ffffff;
32 | $uni-bg-color-grey:#f8f8f8;
33 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色
34 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
35 | 
36 | /* 边框颜色 */
37 | $uni-border-color:#c8c7cc;
38 | 
39 | /* 尺寸变量 */
40 | 
41 | /* 文字尺寸 */
42 | $uni-font-size-sm:24upx;
43 | $uni-font-size-base:28upx;
44 | $uni-font-size-lg:32upx;
45 | 
46 | /* 图片尺寸 */
47 | $uni-img-size-sm:40upx;
48 | $uni-img-size-base:52upx;
49 | $uni-img-size-lg:80upx;
50 | 
51 | /* Border Radius */
52 | $uni-border-radius-sm: 4upx;
53 | $uni-border-radius-base: 6upx;
54 | $uni-border-radius-lg: 12upx;
55 | $uni-border-radius-circle: 50%;
56 | 
57 | /* 水平间距 */
58 | $uni-spacing-row-sm: 10px;
59 | $uni-spacing-row-base: 20upx;
60 | $uni-spacing-row-lg: 30upx;
61 | 
62 | /* 垂直间距 */
63 | $uni-spacing-col-sm: 8upx;
64 | $uni-spacing-col-base: 16upx;
65 | $uni-spacing-col-lg: 24upx;
66 | 
67 | /* 透明度 */
68 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
69 | 
70 | /* 文章场景相关 */
71 | $uni-color-title: #2C405A; // 文章标题颜色
72 | $uni-font-size-title:40upx;
73 | $uni-color-subtitle: #555555; // 二级标题颜色
74 | $uni-font-size-subtitle:36upx;
75 | $uni-color-paragraph: #3F536E; // 文章段落颜色
76 | $uni-font-size-paragraph:30upx;


--------------------------------------------------------------------------------