这里总结一些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. tep用户手册帮你从unittest过渡到pytest

    unittest和pytest是Python的2个强大的测试框架,经常用来做UI自动化或接口自动化.unittest是PyCharm的默认集成工具,也是我们大多数人入门自动化的首选框架.pytest提 ...

  2. Typora+Picgo+Gitee实现上传图片

    下载picgo和node.js 百度网盘地址: 链接:https://pan.baidu.com/s/1QwbXn4vFuDfSFNOnZU5-Jg 取码:efgc 打开picgo,安装gitee-u ...

  3. EF Code First生成的数据表去复数(去掉数据表最后面那个s) 和 EF decimal 小数位的保留

    modelBuilder.Conventions.Remove<System.Data.Entity.ModelConfiguration.Conventions.PluralizingTabl ...

  4. .Net MVC Redirect出现:服务器无法在已发送 HTTP 标头之后设置状态解决方案

    使用过滤器控制权限时,若无权则跳转到无权页面,但是每次跳转都会出现 ERROR - System.Web.HttpException (0x80004005): 服务器无法在已发送 HTTP 标头之后 ...

  5. 使用@Param注解

    1,使用@Param注解 当以下面的方式进行写SQL语句时: @Select("select column from table where userid = #{userid} " ...

  6. 内部类和Lambda

    1.1 内部类的基本使用 在一个类中定义一个类.举例:在一个类A的内部定义一个类B,类B就被称为内部类 内部类定义格式 格式&举例: /* 格式:    class 外部类名{   修饰符 c ...

  7. javap使用

    在反编译前你当然需要先编译这个类了进入当前目录下:javac -g SynchronizedTest.java(使用-g参数是因为要得到下面javap -l时的输出需要使用此选项) 编译完成后,我们在 ...

  8. Atlas 2.1.0 实践(2)—— 安装Atlas

    在完成Atlas编译以后,就可以进行Atlas的安装了.Atlas的安装主要是安装Atlas的Server端,也就Atlas的管理页面,并确保Atlas与Kafka Hbase Solr等组件的集成. ...

  9. Qt学习笔记-嵌入式qt程序支持显示中文

    移植后得qt程序在开发板上运行时无法显示中文. 拷贝windows中的字体也不行. 从网上找到方法. 添加以下代码:需要头文件  #include <QTextCodec> QTextCo ...

  10. JavaCV FFmpeg采集麦克风PCM音频数据

    前阵子用一个JavaCV的FFmpeg库实现了YUV视频数据地采集,同样的采集PCM音频数据也可以采用JavaCV的FFmpeg库. 传送门:JavaCV FFmpeg采集摄像头YUV数据 首先引入 ...