今天項目組給了一個項目給我,并且使用better-scroll實現(xiàn)上下滑動的效果蜗帜,對此總結(jié)一些細節(jié)
1.在vue里面使用better-scroll,首先要下載這個包恋拷,可以使用npm inatall better-scroll或者cnpm install better-scroll
2.個人喜歡封裝好一個scroll文件,然后在需要的地方使用厅缺。網(wǎng)上有很多封裝好的蔬顾,這里就不貼出來了。
3.在.vue下使用時湘捎,首先先import一下導入scroll文件,然后記得注冊诀豁,在html中使用時,記得它只對它的第一個子元素有效窥妇,因此存在多個同級標簽時舷胜,記得用一個div包裹起來。
4.最后一點很多人會忽視的css布局活翩,寫個例子:
.container:要設置固定定位position:fixed烹骨,這樣才能設置它的寬高翻伺,可以設置top:0px;bottom:0px;
.container-content:就是scroll標簽,當scroll標簽的高度小于它子元素的高度時展氓,才能實現(xiàn)下滑條,所以在這里依賴于.container的寬高,可以設置scroll標簽的高為height:100%;overflow:hidden;
具體可以看例子脸爱。