两大问题的解决方案

型号、备注过长情况下的自适应方案

原图

Paste_Image.png

最终效果图

Paste_Image.png Paste_Image.png

方案：

等待数据加载完毕后，分别去获取“售价”、“数量”、“总价”所在DOM的宽度（需要完全显示的区域）以及容器的宽度，然后这两个值算出需要调整的区域的宽度。

技术难点：

1. 由于订单详情页面中商品的“总价”是根据“数量”和“售价”计算得到的，该计算过程完成后组件才会更新视图，因此获取DOM的宽度的时间点必须在计算完成后进行。在Vue里需要用到$nextTick()方法

Paste_Image.png

2. 固定宽度，多余文字显示成省略号的使用方法
   要求外层div固定宽度，内层以下css类

.ellipsis{
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;}

意外的坑：

1. 如果组件的模板的最外层的div有v-if，那么this.$el获取的element是一个注释<....v-if...>，解决方案是在外面再套一层div

特殊的滑动图片方法导致的bug

现象就不贴图了，观察到主要触发条件是有个过度向下拉动并滑动的操作，因此考虑禁止微信浏览器在该页面的过度向下拉动。

代码

var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHeight , currentScroll = top + el.offsetHeight; //If we're at the top or the bottom of the containers //scroll, push up or down one pixel. // //this prevents the scroll from "passing through" to //the body. if(top === 0) { el.scrollTop = 1; } else if(currentScroll === totalScroll) { el.scrollTop = top - 1; } }); el.addEventListener('touchmove', function(evt) { //if the content is actually scrollable, i.e. the content is long enough //that scrolling can occur if(el.offsetHeight < el.scrollHeight) evt._isScroller = true; });}overscroll(document.querySelector('.scroll'));document.body.addEventListener('touchmove', function(evt) { //In this case, the default behavior is scrolling the body, which //would result in an overflow. Since we don't want that, we preventDefault. if(!evt._isScroller) { evt.preventDefault(); }});

参考代码地址： http://www.jianshu.com/p/2eddee561971

使用方法

给组件模板的最外层增加scroll类，然后将该代码放在合适的生命周期位置触发运行即可