IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址 直接引入就行 <script src="inobounce.js"></script> 例子: 因为这个库是禁止了整个页面的滑动,所以如果页面中有其他元素需要滑动的,要给滑动元素设置一个height或max-height,还有overflow: auto; -webkit-over

一.问题描述 最近在做一个小程序项目,需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新,这段话确实禁止了下拉刷新,无论是安卓手机端还是苹果端,但是在苹果端却出现了一个问题,整个页面虽然不能下拉刷新了,但是依然还可以下拉.产品的需求不太允许我这么做,能尽量禁止下拉就禁止,不要让放在顶部的video能够被下拉到底部就行了. 二.解决方法 思路很简单, 在页面滚动的时候判断与顶部的距离,当这个距离小于0的

最近在开发一个h5的app端,前端同事写好页面,我们后端java动态化页面,测试的时候发现安卓端什么浏览器都正常如下图1,可是苹果端无论什么浏览器都出现了底部菜单缺少了两个下图2图一:正常显示 图2,不正常,底部少了菜单. 找前端调试了好久都没有发现任何错误,代码都是同一份的,后来发现是HTML页面少了这个语言声明导致安卓和苹果端显示效果不一样,少了:lang="en",因为不是搞前端的,也没去理会为什么会这样,总之能上线了就能算成功!~~~~~_ _

h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/pages/index/main', success: function (e) { var page = getCurrentPages().pop(); console.log('page',page) if (page == undefined || page == null) return;

uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富的插件生态.支持编译到h5.小程序及App等多个终端平台. 如上图:编译到h5+小程序+App端效果 ◆ 准备 在项目根目录components下新建ua-navbar和ua-tabbar组件. 在main.js中全局引入组件. // 引入自定义组件 import NavBar from './co

在安卓机上,我们随意定义点击事件也能够在找到点击的元素,但是在苹果端上就是不行,怎么点击都没有效果.这是因为在苹果机上window禁止了手指误点功能,必须解除这一功能,或者给点击事件指引某个元素上绑定了事件.最好的解决方法如下: div{ cursor: pointer; }

前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官方文档: https://www.html5plus.org/doc/zh_cn/android.html H5端调用Android activity 并获取activity返回过来的数据: //获取当前Activity,使用H5的方式调用android原生方法,从而启动activity var m

h5.jq 移动端评论点攒功能 平时做的项目中大部分都会涉及到评论的功能,之前用angular写的项目,功能写起来很方便,但是对于一个单页来说,angular有点大材小用了,所有今天分享一个关于jq制作评论点赞的移动端展示功能. 效果如下图: 关于效果就是上图所示,现在分析一下代码的部分吧! html部分 <ul id="comments_list"> <li class="comments"> <div class="com

H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03b57b5866 https://www.jianshu.com/p/2e20f868f385 https://github.com/BoleLee/mobile-web-pagefit https://segmentfault.com/a/1190000008767416 https://juej

uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对话框.actionsheet底部动作框.toast轻提示.长按定位菜单)等功能. 如下图:H5+App端+小程序效果,亲测多端运行一致. ◆ 引入使用  ▍在main.js中引入uapopup弹框组件 // 引入自定义弹框组件 import uaPopup from './components/ua

例如我现在的项目运行在 http://localhost:8080,而我有个接口是 https://service.picasso.adesk.com/v1/wallpaper/album,发起请求就会出现跨域问题,以下是解决方法 首先找到 manifest.json 这个文件,在项目目录的src文件夹下,添加 "h5" 节点 1 "h5": { 2 "devServer": { 3 "port": 8080, 4 "

/*设置IOS页面长按不可复制粘贴,但是IOS上出现input.textarea不能输入,因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /

前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键菜单menu,聊天底部编辑器模块重新优化源码,弹窗则是继续使用之前自己开发的wcPop.js,具体看项目效果图吧! 效果图: // ...表情.选择区切换 $(".wc__editor-panel").on("click", ".btn", func

个人也是了百度了挺久的了,花费的时间( 俩个半小时 ) uniapp 的打包首先要先配置,配置好了才能去进行打包,如图所示. 这只是第一步. 注意: 1.运行基础路径最好用 ./ ,如果配置了其他请自行添加路径. 2.由于uniapp 的特性,所以导致了不支持 history 模式,只能支持 hash 模式( 路径会带 # ) 3.千万千万不能勾选摇树优化( 如果项目引用了其他组件,则会报错 node模块找不到组件,实际上是由于摇树优化,裁剪了一部分没有使用的组件,导致 node模块的缺失 )

1.通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.横屏竖屏相互切换,能自适应,并且布局不会乱掉: 3.为能在不同分辨率的手机上能更好的展示,建议采用响应式设计(如:offerlist页面在大屏时显示3行,小屏时显示2行) 4.在手机上从list点击进入detail页面,要在原窗口打开,这样可以通过页头的返回按钮返回,而不需要通过手机的返回键返回,这样交互上更友好. 5.关注页面请求,是否会有多余的请求,或者请求后有多余的数据返回,尽量精简,否则会浪费流量. 6

众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮 浏览器菜单栏 mac: cammond + +/- 浏览器菜单栏 由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl +

在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs.qq.com/ 想看怎么导入,直接跳到第三点 开发过程中主要遇到的问题为: 1.SDK问题 网上关于sdk的申请已经有很多教程了,此处便不多说,uniapp内置了map组件,但是使用过的人都知道,uniapp内部的组件,只支持了标点marker等一些简单api,如果想使用搜索附近商店.搜索附近医院.

前言: 为什么会写这么一个教程,因为很久之前做过一个对接银行POS我们的系统是使用的H5开发的app应用.但是假如对结果银行相关业务的小伙伴应该都清楚,银行的业务相对于其他的对接方而言安全性比较高,而且一般都不会提供定制开发,所以只能我们自己来实现与他们的对接.因此我们把支付这一块做成了Android原生的对接,因为我们需要对接银行提供的Activity组件来来实现POS机扫码.刷卡等相关的支付功能. 什么是原生开发?什么是混合开发?两者有什么区别? 详情概述:https://zhuanlan.

<script type="text/javascript"> var browser = { versions : function() { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident : u.indexOf('Trident') > -1, //IE内核 presto : u.indexOf('Presto') > -1, //o

1.可以给document的touchmove事件禁止掉就行了 document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDefault(); }) 2.如果页面有部分区域必须需要滑动,需要用touchmove事件的话,那么可以把那部分的touchmove事件过滤掉 比如我想要以下代码中的bottom类可以用touchmove事件 <!DOCTYPE html> <html la

偶然发现用ipad访问我的网站时,发现网站上的一串数字变颜色了(原来是红色的),现在变成了蓝色.一开始以为网站出了什么问题,后来在PC端查看,发现颜色依旧是红色.在ipad上点击还会弹出菜单呼叫的选项,基本可以断定是Safari搞的鬼了.Safari识别电话号码功能会自动将数字识别成电话号码. 别的地方倒也罢了,如果在用户名中出现数字(手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”),那效果会很不好. 为了这个问题,到Safari的官网翻找,发现Safari有个私有meta属性可以解