混合开发笔记
混合开发笔记,一起进步
Juliet_xmj
我只是一个小前端
展开
-
混合开发笔记 —— H5js和移动安卓ios交互
H5js和移动安卓ios交互很好懂这个H5是基于VUE写的https://blog.csdn.net/weixin_44696379/article/details/103327042?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-Bl原创 2020-08-05 11:10:51 · 185 阅读 · 0 评论 -
混合开发笔记6——解决h5页面在手机端键盘弹起事件
描述:app嵌入h5页面,当页面内有脚部固定导航时,键盘弹起,固定导航栏的位置也会弹起解决:使用监听watch以及window.onresize() 窗口发生变化时函数html <div class="footer" v-show="isOriginHeight"> <!-- 脚部内容 --> </div>方法<script>export default { data() { return {原创 2020-08-28 14:43:34 · 456 阅读 · 0 评论 -
混合开发笔记5——h5页面在ios刘海屏适配
h5页面在ios刘海屏适配多种,只总结其中一种(官方适配方案)iOS11同时新增了一个特性,constant(safe-area-inset-*),这是Webkit的一个CSS函数,用于获取安全区域与边界的距离,有四个预定义的变量(单位px):safe-area-inset-left:安全区域距离左边界距离,横屏时适配safe-area-inset-right:安全区域距离右边界距离,横屏时适配safe-area-inset-top:安全区域距离顶部边界距离,竖屏下刘海屏为44px,iphon转载 2020-08-28 14:37:44 · 1933 阅读 · 0 评论 -
混合开发笔记4——使用v-touch插件的h5页面无法在ios上下滑动
vue+vue-touch及常见问题解决vue-touch使用Vue项目的移动端页面上加上左右滑动效果,安装插件vue-touch(1)安装npm install vue-touch@next --save(2)main.js引入import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})VueTouch.config.swipe = { threshold: 100, //手指左右滑动距离};(3)组件原创 2020-08-28 14:25:08 · 641 阅读 · 0 评论 -
混合开发笔记3——移动端h5页面滚动不自然
混合开发移动端h5页面滚动不自然描述:网页开发滚动会出现卡顿现象,不流畅,手机滑动,手指离开页面,直接停止滑动解决:手机滑动,手指离开页面滑动有缓冲效果,不会直接停止滑动 overflow: scroll; -webkit-overflow-scrolling: touch;//做移动端适配隐藏滚动条html::-webkit-scrollbar,body::-webkit-scrollbar { display: none;}scrollbar-width: none;.原创 2020-08-28 14:16:57 · 163 阅读 · 0 评论 -
混合开发笔记2——h5与ios交互(WebViewJavascriptBridge)
h5与移动交互(WebViewJavascriptBridge)(WebViewJavascriptBridge+vue)1.固定代码bridge.js//判断机型let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);let isAndroid = navigator.userAgent.indexOf("Android") > -1 || navigator.userAgent.indexO原创 2020-08-28 14:12:49 · 359 阅读 · 0 评论 -
混合开发笔记1——解决ios嵌入h5页面键盘收回页面错位
解决ios嵌入h5页面键盘收回页面错位描述:ios嵌入的h5页面当键盘弹起,页面上移,当键盘收回时,页面错位,并不回到原来位置解决:<input class="content-input" placeholder="请输入姓名" v-model="peopleList.name" @focus="changefocus()" @blur.prevent="changeBlur()"/>//vue methods changeBlur(){ let u = navigator.u原创 2020-08-28 14:03:52 · 249 阅读 · 0 评论