uniapp如何在手机端自定义操作DOM节点事件

uniapp在真机上运行时是不支持js节点操作的;
我可能描述的不一定对,但是功能已经实现,欢迎指正
在uniapp官网API中有介绍
uniapp如何在手机端自定义操作DOM节点事件_第1张图片
renderJS功能有两个即提高交互能力和操作DOM;
下面是我的节点拖拽功能的实现;

//这是要操作的哪个节点(touchstart是鼠标按下事件)注意
//的是方法move要在renderJS
<view 
@touchstart="renderjs.move"
>

在当前vue文件另写script标签写renderJS里的事件

<script module='renderjs' lang="renderjs"  >
	export default{
				data() {
					return {
						mySortable:null,
						readStyleArrss:[],
						vm:'',
					};
				},
				mounted(){
					
				},
				methods:{
							//当检测的变量改变时触发此方法
							//因为我要操作的是轮播的单个节点而且轮播的内容是滑动后加载的所以我要知道节点的数组和当前是轮播的哪个;
							
							transimit(newValue, oldValue, ownerVm, vm) {
							 
									  this.readStyleArrss = newValue;
							 },
							 //当检测的变量改变时触发此方法
							 //简而言之这两个方法是传值的
							appSubjectIndexTransimit(newValue, oldValue, ownerVm, vm){
								console.log('appSubjectIndexTransimit0',newValue, oldValue, ownerVm, vm)
								this.vm = newValue
							},
							//这是拖拽事件从鼠标按下滑动到松开;
							move(e){
								
								console.log("鼠标按下",e,this.readStyleArrss,this.vm);
								
								var ele1 = document.querySelectorAll(".contentRead");
								
								var index = this.vm
								
								var swiper = document.getElementsByTagName("uni-swiper-item");
								var styleIndex =this.readStyleArrss.indexOf(index);//this.readStyleArr.(index);
								console.log(swiper)
								swiper[index].style.overflow = 'hidden'
								var sY = e.touches[0].clientY - ele1[styleIndex].offsetHeight;
								
								document.ontouchmove = function(e){
									
									var eY = e.touches[0].clientY - sY ;
													
									
													
									// ele1[ele1.length - 1].style.top  = eY + "px"
									ele1[styleIndex].style.height = eY + 'px';
									ele1[styleIndex].style.overflow = 'scroll'
									}
								document.ontouchend = function(){
								 				//清除onmousemove事件
								 				console.log("songkail")
												document.ontouchmove = null;
												
								 				swiper[index].style.overflow = 'scroll'
								}
							},
						}
	}
</script>

重点
这两个检测方法最好不要跟操作节点的标签放在一起(最好放在最外层)因为我写的是轮播图这两个方法放在了轮播图的节点上造成了第一次无法检测到改变第二次之后正常(可能是因为节点还未渲染检测不执行造成的)将这两个方法放在外面完了。

<view class="foot" 
			:readStyleArr="readStyleArr"  :change:readStyleArr="renderjs.transimit"
			:appSubjectIndex="appSubjectIndex" :change:appSubjectIndex="renderjs.appSubjectIndexTransimit"
		>

你可能感兴趣的:(拖拽,swiper,uni-app,dom操作)