型號(hào)、備注過長(zhǎng)情況下的自適應(yīng)方案
原圖
Paste_Image.png
最終效果圖
Paste_Image.png
Paste_Image.png
方案：
等待數(shù)據(jù)加載完畢后谦屑，分別去獲取“售價(jià)”驳糯、“數(shù)量”、“總價(jià)”所在DOM的寬度（需要完全顯示的區(qū)域）以及容器的寬度氢橙，然后這兩個(gè)值算出需要調(diào)整的區(qū)域的寬度酝枢。
技術(shù)難點(diǎn)：
- 由于訂單詳情頁面中商品的“總價(jià)”是根據(jù)“數(shù)量”和“售價(jià)”計(jì)算得到的，該計(jì)算過程完成后組件才會(huì)更新視圖悍手，因此獲取DOM的寬度的時(shí)間點(diǎn)必須在計(jì)算完成后進(jìn)行帘睦。在Vue里需要用到$nextTick()方法
Paste_Image.png
- 固定寬度，多余文字顯示成省略號(hào)的使用方法
要求外層div固定寬度坦康，內(nèi)層以下css類
.ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;}
意外的坑：
- 如果組件的模板的最外層的div有v-if竣付，那么this.$el獲取的element是一個(gè)注釋<....v-if...>，解決方案是在外面再套一層div
特殊的滑動(dòng)圖片方法導(dǎo)致的bug
現(xiàn)象就不貼圖了滞欠，觀察到主要觸發(fā)條件是有個(gè)過度向下拉動(dòng)并滑動(dòng)的操作卑笨，因此考慮禁止微信瀏覽器在該頁面的過度向下拉動(dòng)。
代碼
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.reibang.com/p/2eddee561971
使用方法
給組件模板的最外層增加scroll類仑撞，然后將該代碼放在合適的生命周期位置觸發(fā)運(yùn)行即可
