本文為菜鳥窩編輯吳佳林的連載财搁。
小程序的視圖容器主要有三種，分別是 view慕购，scroll-view聊疲，swiper。下面分別介紹一下這三種視圖容器沪悲。
view
在之前的介紹里面获洲，我們很多舉例都是有關(guān) view ，大家應(yīng)該都比較熟悉了殿如，接觸過前端的贡珊，應(yīng)該對(duì) div 不陌生，view 的功能就跟 div 非常相似涉馁。 view 有很多個(gè)屬性,分別是
-
hover : 是否啟用點(diǎn)擊態(tài)门岔，默認(rèn)是false。
設(shè)置這個(gè)屬性就是講視圖設(shè)置成可點(diǎn)擊之后的樣式谨胞。設(shè)置形式為
<view hover="{{false}}">123</view> hover-class：指定按下去的樣式類固歪，默認(rèn)值是none。設(shè)置上面
hover這個(gè)屬性之后胯努，你會(huì)發(fā)現(xiàn)其實(shí)沒有樣式效果牢裳，這是因?yàn)闆]有設(shè)置個(gè)屬性。這個(gè)屬性決定了 view 按下去之后的樣式叶沛。設(shè)置形式為<view hover="{{true}}" hover-class="red">123</view>,其中red是一個(gè)wxss的樣式蒲讯。
.red{
background: red
}
- hover-start-time:按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒灰署。
- hover-stay-time：手指松開后點(diǎn)擊態(tài)保留時(shí)間判帮，單位毫秒
scroll-view
可滾動(dòng)視圖區(qū)域。scroll-view 就是一個(gè)大的可滾動(dòng)的布局里面可以包裹小布局溉箕，形式如下晦墙。
```
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>
```
介紹一下各個(gè)屬性
scroll-x ：是否允許橫向滾動(dòng)，默認(rèn)是false肴茄。形式
<scroll-view scroll-x={{false}}>scroll-y ：是否允許縱向滾動(dòng)晌畅。其他方面跟
scroll-x一樣。-
upper-threshold： 距頂部/左邊多遠(yuǎn)時(shí)（單位px）寡痰，觸發(fā) scrolltoupper 事件抗楔。
前半部分不難理解棋凳，就是一個(gè)距離的問題，形式是
upper-threshold="100",后面的事件连躏，到底如何觸發(fā)呢剩岳。這就涉及到到另外一個(gè)屬性bindscrolltoupper，形式是bindscrolltoupper='upper'這個(gè)upper就是定義在js文件里面的函數(shù)入热。
Page({
data: {
},
upper: function (e) {
console.info("1111")
}
})
也就是這個(gè)當(dāng)距頂部/左邊達(dá)到一定的距離的時(shí)候拍棕，就會(huì)觸發(fā)bindscrolltoupper綁定的一個(gè)js函數(shù)。
lower-threshold：距底部/右邊多遠(yuǎn)時(shí)（單位px）才顿，觸發(fā) scrolltolower 事件莫湘。觸發(fā)的是
bindscrolltolower綁定的函數(shù)。scroll-top ：設(shè)置豎向滾動(dòng)條位置
scroll-left： 設(shè)置橫向滾動(dòng)條位置
scroll-into-view：值應(yīng)為某子元素id（id不能以數(shù)字開頭）郑气，則滾動(dòng)到該元素幅垮，元素頂部對(duì)齊滾動(dòng)區(qū)域頂部，只支持縱向滾動(dòng)
scroll-with-animation：在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡
enable-back-to-top： iOS點(diǎn)擊頂部狀態(tài)欄尾组、安卓雙擊標(biāo)題欄時(shí)忙芒，滾動(dòng)條返回頂部，只支持豎向
bindscrolltoupper:滾動(dòng)到底部/右邊讳侨，會(huì)觸發(fā) scrolltolower 事件
bindscrolltolower：滾動(dòng)到底部/右邊呵萨，會(huì)觸發(fā) scrolltolower 事件
-
bindscroll ：滾動(dòng)時(shí)觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindscroll這個(gè)函數(shù)要會(huì)在滾動(dòng)的時(shí)候一直調(diào)用函數(shù)跨跨，所以要小心性能問題潮峦。
【五一大促】菜鳥窩全場(chǎng)android項(xiàng)目實(shí)戰(zhàn)課程低至五折，更有價(jià)值33元的四款熱門技術(shù)免費(fèi)領(lǐng)勇婴，17年初優(yōu)惠力度最大的一次活動(dòng)忱嘹，有意向的童鞋不要錯(cuò)過
狂戳>>http://www.cniao5.com/hd/2017/51.html
