uni-app 开发随笔(踩坑记录)
这里总结一些uni-app开发时我遇到的坑
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你会发现一个怀疑人生的问题,列表无法渲染但是能接收到后端的数据,各种调试最后发现是拦截器的事,我门项目拦截器是自己封装的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('暂停的上一个') } }
赞 (0)