vue在ios手机上的一些问题(这次写的h5公众号)和后面补充的小程序问题

这篇博客详细记录了在开发Vue H5和小程序时遇到的17个坑,包括使用fixed定位导致底部导航不显示、禁止页面缩放、长按事件、输入框点击位置偏移、图片长按菜单、滚动卡顿、页面返回处理、iPhone底部小横条适配等问题,并提供了相应的解决方案。
摘要由CSDN通过智能技术生成

坑一:使用定位fixed,底部导航不显示,代码我就不写,总结就是定位套定位,心累代码太多不想贴;

坑二:禁止页面放大缩小,

解决:Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小

坑三:移动端h5页面禁止长按选择复制 ,

解决:移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客

坑四:苹果手机IOS点击输入框弹出键盘后,所有按钮点击位置上移 ,

解决:苹果手机IOS点击输入框弹出键盘后,所有按钮点击位置上移_料峭春风吹酒醒,微冷, 山头斜照却相迎。 回首向来萧瑟处,归去, 也无风雨也无晴!-CSDN博客

坑五:长按图片会弹出菜单,菜单上可以保存图片

解决:我比较暴力,直接用遮罩遮住图片,让它不能触发页面长按,上面坑三一起写效果更好,至少不会复制,遮罩怎么做?看代码:

<div class="qr-box">
	<img class="img" :src="qrInfo.qrCodeImage" alt=""/>
	<div class="qr-modal"></div>
</div>

    .qr-box,
	.qr-box .img,
	.qr-modal{
		width: 3.4rem;
		height: 3.4rem;
	}
	/* 遮罩禁止长按图片保存 */
	.qr-modal{
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

坑六:/*增加弹性滚动,解决滚动不流畅的问题*/ 

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
uni-app是一个由DCloud公司开发的框架,它使用Vue.js来开发所有前端应用。开发者只需要编一套代码,就可以将应用发布到iOS、Android、Web(响应式)以及各种小程序平台(如微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝)和快应用等多个平台。无论是跨端开发,还是仅针对小程序AppH5开发,uni-app都提供了更好的开发框架和更方便的开发体验。 对于小程序开发,你可以使用uni-app框架来开发,它提供了丰富的功能和组件,可以让你更轻松地开发小程序。在进行小程序开发之前,需要进行一些准备工作,例如配置小程序关联信息(如微信公众号关联小程序)等。这些准备工作可以确保你的小程序能够正常上线并与其他平台进行关联。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uin-app微信小程序开发](https://blog.csdn.net/weixin_70380078/article/details/131332819)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uniapp开发微信小程序,从构建到上线](https://edu.csdn.net/skill/mini_programs/mini_programs-31ee2719d0214d4a875a82607d1071e5)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值