WEEX开发总结

image.png

1:上拉加载更多使用的函数;

image.png

在最开始使用的是loading这个组件;在短链接的情况下就会出现;滑动就加载;无论是否滑动到底部;
在使用list中的loadmore这个函数的时候;就会出现在短连接的情况下无法触发loadmore函数;
是这样处理的兼容性

image.png

image.png

---

2:ref中的topnode;是做的回到顶部的兼容;

image.png

在短连接中;使用dom.scrollToElement(el,{});这个方法是没有作用的,在长链接夏是正常的;就使用window.scroll(0,0);做兼容处理;

3:关于appear 和 disappear 方法的兼容;

image.png

;
在短连接的情况下;会直接执行appear函数;无论是否可见;disappear函数在短连接的情况下是不触发的;
具体的处理方案长链接正常使用;短连接的情况使用window.onscroll;来解决;

4:关于list中header组件的使用;

image.png

image.png

使用header组件,在长链接的情况下实现滑动到该位置,该模块吸顶,但是在短连接的情况下是不行的;
需要用正常的方式就行判断;

5:底部定位遮盖的问题;

image.png

image.png

这个空标签的使用是因为底部导航是固定定位;一般咱的处理方式是要给遮盖的那部分模块父级设置margin或者padding;但是在长短连接的还有安卓IOS的情况下会有不同的兼容问题

6:跳转以及数据请求的链接问题;

image.png

image.png

数据请求问题还有跳转问题;对于参数需要使用encodeURIComponent;进行编码;不要全部编码;

7:关于IOS8对于弹性盒模型的兼容问题;

image.png

实现上下左右居中;

image.png

横向排列;

image.png

实现justify-content:space-around;的效果;

8:其他问题:
在IOS上;如果你在CSS中设置了宽;'width:0;';你想要动态的改变这个元素的宽的话,该元素在IOS长链接的情况下,会首先闪一下变成你要设置的宽;最后会再次变成0;
还用对于行内元素;使用动画设置高宽的时候;无论是否设置display:block;均会报错;说style为not defind;

9:轮播图指示器的问题
在现在的开发环境下,使用的为vue2.5.3版本的;使用的时候就会报错;具体原因不清楚;但是使用行内样式;但是不要写px单位就会正常

image.png

image.png