一、屬性綁定的innerHTML和直接純js的innnerHTML區別
純js的
document.getElementById("htmlcontent").innerHTML = this.htmlcontent;
這種方式可以把css樣式也按照css標簽和html標簽插入文本顯示
然而屬性綁定的
innnerHTML:[innerHTML]="this.htmlcontent";
這種插入方式只能識別html標簽，而標簽里內嵌的css樣式無法識別
PS：踩了一個小坑。記錄一下
另外：
屬性綁定可以用的活一點
定義一個變量，即可把該變量的值直接復制綁定給一個屬性
二、設置多行文本超出顯示省略號，在手機端超出部分無法隱藏解決方法
方法一：
跨瀏覽器兼容的方案
比較靠譜簡單的做法就是設置相對定位的容器高度，用包含省略號(…)的元素模擬實現；
p{
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:020px1px45px;
background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}
但是效果不好看
方法二：
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
但是會出現BUG，會出現超出部分溢出不影藏
結果：我綜合了兩種方法如下。給給定換行數，同時給定高度和行高限制。
html:
<p>顯示超過兩行就顯示省略號，其余隱藏，隱藏不了的情況下給這個模塊添加一個高度和行高
，高度是行高的兩倍</p>
</div>
css:
.caption {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #999999;
line-height: 15px;//
height:30px;///* 2行隱藏就兩倍，三行隱藏就三倍*/
}
三、動態設置video的寬高的方法，js設置和CSS設置
一、csss設置
<div class="wrap">
<video controls="controls" class="videoBox" #iframeurl>
<source src="3a1be272f8b.mp4" type="video/mp4" />
</video>
</div>
css:
.wrap{
width:100%;
position:relative;
padding-bottom:62%; /*需要用padding來維持16:9比例,也就是9除以16*/
height: 0;
video{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%
}
}
JS的方法：
思路：用js獲取到當前video的DOM，再對DOM進行動態的寬高設置
以下是以angular的例子展示，在純JS里面也是一樣的道理
html:
<video controls="controls" class="videoBox" #iframeurl>
<source src="a1be272f8b.mp4" type="video/mp4" />
</video>
TS:
獲取DOM的方法
@ViewChild('iframeurl') iframeurl:ElementRef;
let iwidth = screen.width;
let iheight = iwidth*0.62;
console.log(iheight+"高度"+iwidth);
this.iframeurl.nativeElement.style.width = iwidth+"px";
this.iframeurl.nativeElement.style.height = iheight+"px";
四、ionic2中ion-slides輪播圖報錯Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
在使用ionic2的輪播圖時會報錯：
at autoplay (swiper.js:175)
at startAutoplay (swiper.js:218)
at initSwiper (swiper.js:164)
at Slides._initSlides (slides.js:828)
at slides.js:527
at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3863)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
解決方法：
加一個判斷，判斷輪播的數組有值再顯示
注意判斷輪播數組的長度的時候會出現length屬性未定義的報錯，這是由于頁面加載的時候模板先加載了，componnent還沒有加載，就沒有渲染模板之前模板就加載了導致模板加載的時候沒有讀取到輪播數組，所以會報錯，解決方法：
在component里面定義一個參數，在獲取到輪播數組的時候就獲取該數組的長度值賦給這個參數，然后在模板里面用這個參數去做判斷；
定義參數獲取當前輪播數組長度
this.len=this.list.length;
判斷
<ion-slides class="slide" [pager]="true" [loop]="true" autoplay="3000" *ngIf="len >=1" >
<ion-slide *ngFor="let slide of list" >
<a href="{{slide.LinkUrl}}" (click)="bannerDetail(slide)">
<img src="{{slide.PicUrl}}">
</a>
<div class="slidesTitle">
<div class="iteming">
<span class="title">{{slide.Title}}</span>
</div>
</div>
</ion-slide>
</ion-slides>
