这里总结一些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('暂停的上一个')
}
}

uni-app 开发随笔(踩坑记录)的更多相关文章

  1. web APP 开发之踩坑手记

    屏蔽输入框怪异的内阴影 -webkit-appearance:none 禁止自动识别电话和邮箱 <meta content="telephone=no" name=" ...

  2. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  3. IDFA踩坑记录

    IDFA踩坑记录: 1.iOS10.0 以下,即使打开“限制广告跟踪”,依然可以读取idfa: 2.打开“限制广告跟踪”,然后再关闭“限制广告跟踪”,idfa会改变: 3.越狱机器安装开发证书打的包, ...

  4. ubuntu 下安装docker 踩坑记录

    ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...

  5. ABP框架踩坑记录

    ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...

  6. SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录

    Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...

  7. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  8. manjaro xfce 18.0 踩坑记录

    manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...

  9. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...

  10. [技术博客]iview组件样式踩坑记录

    [技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...

随机推荐

  1. Python实现全自动购买火车票!抢票回家过年咯

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理这个是实现结果,因为一天只能取消三次,所以最后一步点击确认被我注释了1.首先实现使用selenium登 ...

  2. 灯光设置(light)

    clc;clear all;close all; %% 台灯的设置figure('color','k')% 底座fill3([0 1 1 0],[0 0 1 1],[0 0 0 0],'b',... ...

  3. ASP.NET Core 3.1使用log4net/nlog/Serilog记录日志

    Serilog中的结构化日志支持非常好,而且配置简便.我能够比其他任何人更轻松地启动和运行Seirlog.Serilog中的日志可以发送到很多目的地.Serilog称这些东西为"接收器&qu ...

  4. Web项目Bin目录下的文件改动会引发Application_End事件,IIS会回收线程

    原博文 https://blog.csdn.net/caca95/article/details/85284309 处理方法 Web项目Bin目录下的文件改动会引发Application_End事件, ...

  5. 关于 Softmax 回归的反向传播求导数过程

    对于 \(Softmax\) 回归的正向传播非常简单,就是对于一个输入 \(X\) 对每一个输入标量 \(x_i\) 进行加权求和得到 \(Z\) 然后对其做概率归一化. Softmax 示意图 下面 ...

  6. 什么是泛型?,Set集合,TreeSet集合自然排序和比较器排序,数据结构-二叉树,数据结构-平衡二叉树

    ==知识点== 1.泛型 2.Set集合 3.TreeSet 4.数据结构-二叉树 5.数据结构-平衡二叉树 ==用到的单词== 1.element[ˈelɪmənt] 要素 元素(软) 2.key[ ...

  7. C语言实现的多线程定时器

    目录 1. 大致功能介绍 2. API库介绍 3. 一个例子 4. 库文件源码 注意事项 1. 大致功能介绍 实现任务列表,定时器会间隔一段时间遍历列表发现要执行的任务 任务列表中的所有任务并行执行 ...

  8. JS function 是函数也是对象, 浅谈原型链

    JS function 是函数也是对象, 浅谈原型链 JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解 1. 前言 new 出来的实例有 _proto_ 属性, 并 ...

  9. css3 知识点积累

    -moz-    兼容火狐浏览器-webkit-  兼容chrome 和safari1.角度  transform:rotate(30dge)  水平线与div 第四象限30度  transform: ...

  10. Redis-基础和应用篇

    2020,到新公司这一年多以来,更新文章和总结知识的习惯被丢掉了.我复盘了下自己,原因不是公司技术氛围不好,也不是每天业务需求太多,其根本原因还是---惰性.作为我们技术人随着年龄的增长,精力也会被生 ...