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文件修改一下位置
看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将‘/'改为‘./'
2.背景图片路径不对
在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置
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轮播图不全屏展示
var swiper = new Swiper('.swiper', {
loop: true, // 循环播放,
spaceBetween: 5,
slidesPerView: 'auto',
})
.swiper-wrapper{
width: 80%;
}
小程序
1.转发小程序时默认截屏预览图第一次分享不生成
配置page的navigationStyle: custom后,在非首页进行转发,会出现第一次点分享生成不了预览图的问题,第一次分享取消后,再点击分享(第二次分享),此时预览图生成。
目前已知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'
});