uni-app 开发随笔（踩坑记录）
<h4>这里总结一些uni-app开发时我遇到的坑</h4><h4>uni-app获取元素高度及屏幕高度（uni-app不可使用document）</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;">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()</pre>
</div>
<h4>uni-app之touch事件方向判断</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;">//template
<view
style="width: 100%;height: 500rpx;border: 1px solid red;box-sizing: border-box;"
@touchstart='touchstart'
@touchend='touchend'>
</view>
</pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;">//data中初始化
touchDotX : 0,
touchDotY : 0,
time :0,
touchMoveX:'',
touchMoveY:'',
tmX:'',
tmY:''
</pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;">//事件
touchstart(e){
// console.log(e)
this.touchDotX = e.touches.pageX
this.touchDotY = e.touches.pageY
},
touchend(e){
// console.log(e)
this.touchMoveX = e.changedTouches.pageX;
this.touchMoveY = e.changedTouches.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("右滑=====")
}
}
}
}</pre>
</div>
<h4>js查找替换字符串之replace</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;">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解析标签，此类名给个样式</pre>
</div>
<h4>资讯类型项目swiper嵌套scroll-view</h4>
<h4>1.图文混排用rich-text</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;"><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>'
}
}
</pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;">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解决
</pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:css;gutter:true;"> <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.pause();
}
var videoId = e.target.id;
this.videoId = videoId;
},
video_pause(e) {
if(e.target.id == this.videoId){
this.videoId = null
}else{
console.log('暂停的上一个')
}
}</pre>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/13690877.html
頁:
[1]