這里總結一些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.uj5u.com/2020/09/18/82807181512041.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="https://www.cnblogs.com/smileZAZ/p/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('暫停的上一個')
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/74660.html
標籤：JavaScript