**
scroll-view
**
1)<scroll-view></scroll-view>
滚动框架
2)
<scroll-view >
<view id='one' class='scroll-view-item bc_green'></view>
<view id='two' class='scroll-view-item bc_red'></view>
<view id='three' class='scroll-view-item bc_blue'></view>
</scroll-view>
在框架内写内容
3)wxss中写样式
white-space: nowrap;——不换行
每个项目都应设置高度
.scroll-view{
white-space: nowrap;
}
.scroll-view-item{
height: 200px;
/* 每个项目都应设置高度 */
}
.bc_green{
background-color: green;
}
.bc_red{
background-color: red;
}
.bc_blue{
background-color: blue;
}
4)样式
5)需要将内容都放到一个盒子里
<scroll-view style='height:200px;'>
给框架一个高,将内容锁定
6)滚动
<scroll-view style='height:200px;'scroll-y='true'>
框架默认滚动为flase
**
2.绑定触碰时间
**
1)wxml
<scroll-view style='height:200px;'scroll-y='true' bindscrolltoupper="upper" bindscrolltolower="lower" bind="scroll">
bindscrolltoupper——滚动到顶部/左边
bindscrolltolower——滚动到底部/右边
bindscroll——滚动的过程
2)js
upper:function(event){
console.log("滚动到顶部");
},
lower:function(event){
console.log("滚动到底部");
},
scroll:function(event){
console.log("正在滚动");
}
3)样式