uni-app踩坑之汇总篇-加速云

vue框架总结

uni-app获取元素高度及屏幕高度（uni-app不能应用document）

uni.getSystemInfo({
			　　success: function(res) { // res - 各种各样主要参数
			　　   console.log(res.windowHeight); // 屏幕的总宽 
			　　    let info = uni.createSelectorQuery().select(".元素");
			　　　  info.boundingClientRect(function(data) { //data - 各种各样主要参数
						that=data.height// 获取元素高度
			　　　  　	console.log()  
			　　    }).exec()
			    }
			});
只获取屏幕宽高就可：
const { windowHeight } = uni.getSystemInfoSync()

uni-app之touch事情方位判断

//template
<view 
			style="width: 100%;height: 500rpx;border: 1px solid red;box-sizing: border-box;"
			@touchstart='touchstart' 
			@touchend='touchend'>
</view>

//data中复位
		touchDotX : 0,
		touchDotY : 0,
		time :0,
		touchMoveX:'',
		touchMoveY:'',
		tmX:'',
		tmY:''

//事情
touchstart(e){
				// console.log(e)
				this.touchDotX = e.touches[0].pageX 
				this.touchDotY = e.touches[0].pageY 
},
	touchend(e){
		// console.log(e)
		this.touchMoveX = e.changedTouches[0].pageX;
		this.touchMoveY = e.changedTouches[0].pageY;
		this.tmX = this.touchMoveX - this.touchDotX;
		this.tmY = this.touchMoveY - this.touchDotY;
		if (this.time < 20) {
			  let absX = Math.abs(this.tmX);
			  let absY = Math.abs(this.tmY);
			  console.log(absX)
			  if (absX > 2 * absY) {
				if (this.tmX<0){
				  console.log("左划=====")
				}else{
				  console.log("右划=====")
				}
			  }
		}
	}

js查找替换字符串数组之replace

1.一般单独更换只实行一次
var str=“Visit Microsoft Microsoft Microsoft Microsoft”
console.log(str.replace(/Microsoft/, “W3School”)) 将Microsoft更换为W3School
2.所有更换
console.log(str.replace(/Microsoft/g, “W3School”))
3.搜索自变量，情景：将插入的字符串数组搜索配对文本高亮度字体加粗
var content = input键入的字符串数组
console.log(str.replace(new RegExp(content,‘g’), “” content "")
3.1分析标识，该类名给个款式

新闻资讯种类新项目swiper嵌入scroll-view

1.多图排版用rich-text

<rich-text :nodes="nodes"></rich-text>
data() {
        return {
				 nodes: '<div style="text-align:center;">
				 			<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/>
				 </div>'
        }
    }

2.视频列表
2.1video等级过高，这时或是vue文档没法根据z-index改动，官方网站也是有表明，这时得用nvue文档。
2.2 为何nvue文档就可控性，vue文档不可控性？
编译程序不一样，nvue文档根据wexx编译程序方式更贴近app原生态，可是要留意的是，style款式只有用felx合理布局。
这时你就会发现nvue的款式太难了用！！！
2.3假如你挑选的是nvue文档，装包和真机调节安卓系统还算成功，可是ios你就会发现一个开始怀疑人生的问题，目录没法3D渲染可是能接受到后端数据信息，各种各样调节最终发觉是回调函数的事，我们新项目回调函数是自身封装形式的Promise，立即用官方网站的api才可以uni.request（{}）
2.4检测发觉可以与此同时播放视频好几个短视频，问题来了，怎样点一下现阶段来中止上一个视频呢？
官方网站得出api uni.createVideoContext(videoId, this)
可是并没处理，点一下好多个短视频以后有崩溃呈现一直报 未定义的目标id，最后是以ref处理

	<video 
			:id="'videoa' item.id" 
			:ref="'videoa' item.id" 
			:src="item.content" 
			:poster='item.imgUrl' 
			@pause='video_pause' 
			@play='target_play'>
		</video>
	data:{
		videoId:null,
	}
	target_play(e) {
		// 播放视频时开启
		if(this.videoId != null){
			var oldvideoid = this.videoId;
			this.$refs[oldvideoid][0].pause();
		}
		var videoId = e.target.id;
		this.videoId = videoId;
	},
	video_pause(e) {
		if(e.target.id == this.videoId){
			this.videoId = null
		}else{
			console.log('中止的上一个')
		}
	},

热搜词