移动端项目遇到的问题

h5

1. 当页面内容小于一屏的时候,按钮置底,当页面内容大于一屏的时候,按钮置于内容后面。

解决方法:用calc方法。移动端calc会存在兼容性问题,pc端可以用。

   <div style="height: 100%;">
    <div  style="height calc(100% - 50px)">
      <div style="min-height:'300px'"></div>
          <div>content</div>
       </div>
       <div>btn</div>  
    </div>

50px是btn的高度
min-height是content的高度

2. fixed置底在安卓端会有兼容问题。当点击input框弹出键盘时,fixed内容会被顶上去

解决方法1:
vue中可以参考这个链接https://blog.csdn.net/chern1992/article/details/76212205
但是这个方法在vivo等某些安卓手机上会偶现display:none之后不会回显,不过大部分是可以用
解决方法2:用媒体查询

@media only screen and (max-height: 500px) {
    .submitBtn {
      display: none;
    }
  }
3. flex布局,这个布局是真的好用,不过在ios8系统上是有兼容问题,要做兼容处理。mint ui也是采用flex布局,在ios8上会用兼容问题,要进行兼容处理。
4. Mint ui框架的filed组件用disable禁用input时,文字颜色会变。

解决方法:

input:disabled{
  color: #333;
  -webkit-text-fill-color:#333;//一定要写
  opacity:1;//一定要写,因为有自己定义的opacity:0.8
  -webkit-opacity:1;
}

如果filed里面写了placeholder 和disable。会先显示disable的颜色
解决方法:

input{border: none;background: none;color: #333;}
::-webkit-input-placeholder {color: #ADADAD; -webkit-text-fill-color:#ADADAD;}
::input-placeholder {color: #ADADAD;-webkit-text-fill-color:#ADADAD}

加了webkit-text-fill-color:#ADADAD

5. Mint ui 组件中定义click事件没有用

改成click.native.capture

<mt-field label="" placeholder="" v-model="idCardVal" @click.native.capture="hideFixed"></mt-field>
6.transform:rotate3d(0,1,0,360deg)在ios下无效

在做翻牌效果时,发现安卓下可以使用,ios下无效。
解决方法:在旋转元素的父元素加perspective:800px;-webkit-perspective:800px;

<style>
.father{
perspective:800px;
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
}
.child{
    transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);    /* IE 9 */
    -moz-transform:rotateY(0deg);   /* Firefox */
    -webkit-transform:rotateY(0deg); /* Safari 和 Chrome */
    -o-transform:rotateY(0deg); /* Opera */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
</style>
<div class="father">
   <img src="img/xxxx.png" alt="" class="child">
</div>
7. vue打包文件路径不对

1.文件路径不对
找到config文件夹下的index.js文件修改一下位置


image.png

看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将‘/'改为‘./'
2.背景图片路径不对
在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置


image.png
8. 动画

前段时间在做活动页的动画的时候除了animate还有什么办法可以做轨迹动画,特别是复杂的轨迹动画。
Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画(https://www.cnblogs.com/zamhown/p/6688369.html)

9. axios中取消请求

如果需要断开Javascript的ajax请求,一种是通过设置时间,超时自动断开,另一种我们可以调用XMLHttpRequest对象上的abort方法。
参考链接https://blog.csdn.net/zhuxiandan/article/details/81304967

10.vue中使用swiper遇到的问题

① swiper手动滑动时自动轮播失效
设置autoplay:true之后,再设置
autoplay:{
disableOnInteraction: false
}

② swiper动态加载,不会自动轮播
有人说加
var swiper = new Swiper('.swiper', {
observer: true,
observeParents: false
})

但是还是会出现问题③。重新初始化swiper,可以同时解决的② 和 ③

③ swiper动态加载,显示最后一个swiper-slide
在ajax返回数据成功后,设置一个定时器重新初始化swiper,我设置的是100

④ swiper轮播图不全屏展示

image.png

var swiper = new Swiper('.swiper', {
loop: true, // 循环播放,
spaceBetween: 5,
slidesPerView: 'auto',
})
.swiper-wrapper{
width: 80%;
}

小程序

1.转发小程序时默认截屏预览图第一次分享不生成

配置page的navigationStyle: custom后,在非首页进行转发,会出现第一次点分享生成不了预览图的问题,第一次分享取消后,再点击分享(第二次分享),此时预览图生成。


image.png

目前已知ios下不存在这个问题,安卓手机会出现这个问题

重现步骤:
首页通过按钮进入“分享页”
在分享页进行转发(胶囊转发或者分享按钮转发)

(P.S. 题外话,当使用自定义导航头后,ios的转发默认截图是不包含自定义导航头区域,安卓会把自定义导航头也截图进去,能和ios表现一致么?)

现在微信还未解决这个bug,坐等。。。
现解决方法:在方法里写死imgae的图片地址

onShareAppMessage: function () {
    return {
      title: '杭州通纪念卡商城',
      path: 'pages/shopDetail/shopDetail?goodsId=' + this.data.goodsId,
      imgae: this.data.rfdsUrl + this.data.imgUrls[0]
    }
  },

支付宝

1.支付宝,ios环境下document.title改变标题不起作用

解决方法:引入支付宝h5JSSDK,具体参考支付宝H5开放文档https://myjsapi.alipay.com/alipayjsapi/index.html

ap.setNavigationBar({
    title: '设置导航栏背景色',
    backgroundColor: '#ED4A4D'
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 230,247评论 6 543
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 99,520评论 3 429
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 178,362评论 0 383
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,805评论 1 317
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 72,541评论 6 412
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,896评论 1 328
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,887评论 3 447
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 43,062评论 0 290
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,608评论 1 336
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 41,356评论 3 358
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,555评论 1 374
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 39,077评论 5 364
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,769评论 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 35,175评论 0 28
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 36,489评论 1 295
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 52,289评论 3 400
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,516评论 2 379

推荐阅读更多精彩内容

  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 5,042评论 0 9
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,601评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,504评论 0 6
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,555评论 0 1
  • 醉花间•三相问 文/竹兰答水 谁相问,怕相问,相问平添恨。 三拜怎安生,两好方相趁。 夜来锦字信,晓读寒一阵。...
    竹兰答水阅读 374评论 0 0