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('暂停的上一个')
		}
	}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读52次。1.0.0版本 只需修改API接口即可 接口位置:/api/request.js 可以二开自行开发,或直接引用组件。
文章浏览阅读820次。在uni-app和vue3中,我们可以封装全局函数来复用代码。以上就是在uni-app和vue3中封装全局函数的详细完整的方法。_uniapp vue3 vue.prototype
文章浏览阅读671次,点赞22次,收藏6次。整理在Uniapp应用开发中遇到的问题、错误代码与解决方案。
文章浏览阅读122次。【代码】Uniapp Vue3 父组件给子组件传值。_uniapp 父级组件改变子组件值
文章浏览阅读765次。包括数据绑定和计算属性、条件渲染和列表渲染、事件处理、表单输入处理、生命周期钩子、自定义指令和过滤器、路由和导航以及状态管理(如Vuex)
文章浏览阅读129次。Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件_uniapp小程序端tabbar跳转插件
文章浏览阅读1k次,点赞20次,收藏7次。uniapp Vue3 日历 可签到 跳转_uniapp vue3 日历
文章浏览阅读479次。在uni-app中,我们可以使用Vue3的全局API来挂载函数到全局。将全局函数挂载到Vue实例上。这样,我们就可以在任何组件中通过。文件中引入了Vue3和我们的全局函数。在这个例子中,我们首先在。来调用这个全局函数了。_uniapp vue3挂在全局变量
文章浏览阅读316次。包含 首页、社区、关于、我的、预约、订购、选购、话题、主题、收货地址、购物车、系统通知、会员卡、优惠券、积分、储值金、订单信息、积分、充值、礼品、首饰等_uniapp婚恋模板
文章浏览阅读419次。了解uni-app是什么,它的优势和适用场景,以及它作为一个跨平台框架的基本概念。如何安装uni-app,包括环境配置和项目创建等步骤。如何进行uni-app项目的目录结构和代码规范的了解,这对于后续的项目开发至关重要。如何进行uni-app项目的打包和发布,以完成从开发到上线的整个过程。实战项目,通过实际操作案例来巩固和应用所学知识,提升解决实际问题的能力。了解HBuilderX的基本概念和主要特点,以及它与uni-app开发的关系。
文章浏览阅读144次。位置:uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang。注意 :不用管pages目录内文件,因为已经在components内创建组件,直接引用即可。为了防止别人修改抽奖几率,所以写在了云函数(云函数名称jishu)中,大家可以自行修改。里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。商品图片可以从数据库中获取进行赋值即可。调试时请选择 连接云端云函数 进行调试。Uniapp 横向滚动抽奖页面 组件。_uniapp 横向抽奖
文章浏览阅读112次。开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。_移动端match-media
文章浏览阅读33次。【代码】Uniapp Vue3 子组件给父组件传值。
文章浏览阅读91次。全端支持,只需引用组件,更改内容即可_uniapp滚动组件
文章浏览阅读26次。【代码】uniapp Vue2 子组件给父组件传值。
文章浏览阅读177次。微信隐私保护弹出框 隐私协议弹出框,微信隐私保护弹出框,支持vue2和vue3_uninapp 实现微信的隐私弹窗
文章浏览阅读82次。uniapp各类按钮,方便大家复制粘贴使用,提高大家的效率。_uniapp button 图片
文章浏览阅读531次。酷炫钱包页面模板 直接引用_uniapp 钱包页面
文章浏览阅读544次。uniapp 微信小程序登录_uniapp 引入wx.login
文章浏览阅读922次。在这个例子中,我们将所有以’/api’开头的请求代理到’http://localhost:3000’。这样,我们就可以在本地开发环境中访问后端服务器了。在uni-app中,我们可以使用vue.config.js文件来配置跨域(代理)。注意:这个配置只在开发环境中生效,生产环境需要另外配置。_uniapp 代理