标签：uniapp 自定义 top component var touch 组件 event left

代码

文件名：block.vue（在后面的index.vue中被导入）

<template>  
	<view>  <!-- 注意：每个页面只能有一个根view -->
		<view>
			<view @touchstart="block.touchstart" @touchmove="block.touchmove" class="movable">{{block.msg}}</view>
		</view>
	</view>

</template>

<script module="block" lang="wxs">   //第一个元素的wxs模块
	var startX = 0
	var startY = 0
	var lastLeft = 50; var lastTop = 50
	
	function touchstart(event, ins) {   // 获取手指点按的元素的初始位置
		var touch = event.touches[0] || event.changedTouches[0]
		startX = touch.pageX
		startY = touch.pageY
	}  
	function touchmove(event, ins) {    // 获取元素被拖动后的位置
		var touch = event.touches[0] || event.changedTouches[0]
		var pageX = touch.pageX
		var pageY = touch.pageY
		var left = pageX - startX + lastLeft
		var top = pageY - startY + lastTop
		startX = pageX
		startY = pageY
		lastLeft = left
		lastTop = top
		ins.selectComponent('.movable').setStyle({  // 更新符合条件——“class=.movable” 的元素中left和top的值
			left: left + 'px',
			top: top + 'px'
		})
	}
	module.exports = {
		msg: 'Hello',
		touchstart: touchstart,
		touchmove: touchmove
	}
</script>



<style>
	.movable{
		position: absolute;
		width: 100px;
		height: 100px;
		left: 50px;
		top: 50px;
		color: white;
		text-align: center;
		line-height: 100px;
		background-color: red;
	}
</style>

index.vue文件

<template>
	<view>
		<button @click="add('my_component')">click</button>  <!-- 按钮用于向component_arr数组中添加键值对 -->
		<component v-for="item in component_arr" :is="item.component"></component>  <!-- v-for循环将component组件中is属性=item.component的组件渲染出来 -->
	</view>
</template>

<script>
	import Block from './block.vue'    //引入自定义的block组件

	export default {
		data() {
			return {
				component_arr:[]    //创建自定义组件数组
			}
		},
		
		components:{
			'my_component':Block   //注册自定义组件
		},
		
		methods:{
			add(component){     //button绑定的函数，用于向“组件数组”中添加键值对
				this.component_arr.push({
					'component':component   //要添加的键值对
				})
			}
		}	
	}
</script>


<style>
	
</style>

效果

原始状态

点击一次按钮（新增加了一个自定义的组件）

点击多次并拖动该组件

标签：uniapp,自定义,top,component,var,touch,组件,event,left
来源： https://www.cnblogs.com/oasismove/p/16260537.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。