微信小程序的视图容器-- scroll-view
2017-05-15 00:00
267 查看
scroll-view:可滚动视图区域
我们在.wxml文件中使用scroll-View
<scroll-view class="contentScroll" scroll-y="true" bindscrolltoupper="changeP">
<view class="view1"></view>
<view class="view2"></view>
<view class="view3"></view>
<view class="view4"></view>
</scroll-view>
我们在scroll-view中设置了4个view,这里绑定了,scroll-view滚动到顶部(垂直布局)bindscrolltoupper方法,并设置了scroll-y的值为true。表示允许纵向滚动。
在对应.wxss文件中实现布局,这里我们实现scroll-view的竖直滚动
使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。
.contentScroll{
width: 100%;
height: 500rpx;
background-color: yellow;
}
.view1{
width: 100%;
height: 300rpx;
background-color: red;
}
.view2{
width: 100%;
height: 300rpx;
background-color: greenyellow;
}
.view3{
width: 100%;
height: 300rpx;
background-color: cadetblue;
}
.view4{
width: 100%;
height: 300rpx;
background-color: yellow;
}
在.js文件中执行changeP方法
changeP:function (){
console.log("到顶部了");
}
页面显示的效果:
页面可以纵向滚动,当滚动到最顶部时,在控制台会输出:到顶部了。
属性名 | 类型 | 默认值 | 说明 |
scroll-x | Boolean | false | 允许横向滚动 |
scroll-y | Boolean | false | 允许纵向滚动 |
upper-threshold | Number | 50 | 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 |
lower-threshold | Number | 50 | 距底部/右边多远时(单位px),触发 scrolltolower 事件 |
scroll-top | Number | 设置竖向滚动条位置 | |
scroll-left | Number | 设置横向滚动条位置 | |
scroll-into-view | String | 值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部 | |
bindscrolltoupper | EventHandle | 滚动到顶部/左边,会触发 scrolltoupper 事件 | |
bindscrolltolower | EventHandle | 滚动到底部/右边,会触发 scrolltolower 事件 | |
bindscroll | EventHandle | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
<scroll-view class="contentScroll" scroll-y="true" bindscrolltoupper="changeP">
<view class="view1"></view>
<view class="view2"></view>
<view class="view3"></view>
<view class="view4"></view>
</scroll-view>
我们在scroll-view中设置了4个view,这里绑定了,scroll-view滚动到顶部(垂直布局)bindscrolltoupper方法,并设置了scroll-y的值为true。表示允许纵向滚动。
在对应.wxss文件中实现布局,这里我们实现scroll-view的竖直滚动
使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。
.contentScroll{
width: 100%;
height: 500rpx;
background-color: yellow;
}
.view1{
width: 100%;
height: 300rpx;
background-color: red;
}
.view2{
width: 100%;
height: 300rpx;
background-color: greenyellow;
}
.view3{
width: 100%;
height: 300rpx;
background-color: cadetblue;
}
.view4{
width: 100%;
height: 300rpx;
background-color: yellow;
}
在.js文件中执行changeP方法
changeP:function (){
console.log("到顶部了");
}
页面显示的效果:
页面可以纵向滚动,当滚动到最顶部时,在控制台会输出:到顶部了。
相关文章推荐
- 微信小程序的视图容器-- scroll-view
- 微信小程序 教程之wxapp视图容器 scroll-view
- 微信小程序 教程之wxapp视图容器 scroll-view
- 微信小程序的视图容器-view
- 微信小程序--movable-view(可移动的视图容器)
- 微信小程序 view容器 scroll-view swiper轮播图 movable-view cover-view
- 微信小程序例子——快速掌握滚动视图(scroll-view)
- 微信小程序 教程之wxapp 视图容器 view
- 2.1.1微信小程序视图容器 view
- 微信小程序视图示例之view/scroll-view示例中缺少css
- 微信小程序的视图容器-view
- 微信小程序开发—(十三)可滚动视图区域 scroll-view
- 微信小程序 wxapp视图容器 view详解
- 微信小程序-view(视图容器)
- 微信小程序例子——如何使用scroll-view组件实现视图垂直滚动
- 2.1.2微信小程序可滚动视图区域 scroll-view
- 微信小程序组件解读和分析:一、view(视图容器 )
- 微信小程序之scroll-view
- 微信小程序 视图容器组件的详解及实例代码
- (三)微信小程序之容器组件view实现水平和纵向布局