小程序开发基础-scroll-view 可滚动视图区域
小编 / 达叔小生
小程序开发基础-scroll-view 可滚动视图区域
这里只展示纵向滚动,横向同理就不用说明了,可自己尝试,横向滚动属性为scroll-x
,把纵向滚动改为横向滚动即可。
scroll-view
视图组件
scroll-y
是scroll-view
的属性,scroll-y
类型为Boolean
,默认值为false
,表示允许纵向滚动,scroll-y="true"
允许纵向滚动
bindscrolltoupper
是scroll-view
的属性,bindscrolltoupper
类型为EventHandle
,表示滚动到顶部/左边,会触发scrolltoupper
事件,顶部/左边,是因为滚动视图可以横向滚动和纵向滚动,bindscrolltoupper="upper"
定义绑定事件,在逻辑代码中编写,滚动到顶部,触发scrolltoupper
事件。
bindscrolltolower
是scroll-view
属性,与上述bindscrolltoupper
同理,bindscrolltolower
的类型也是EventHandle
,bindscrolltolower
表示滚动到底部/右边,会触发scrolltolower
事件,bindscrolltolower="lower"
表示绑定事件lower
,会触发scrolltolower
事件。
bindscroll
是scroll-view
属性,类型是EventHandle
,表示滚动触发,与上述bindscrolltoupper
属性和bindscrolltolower
属性范围广,bindscroll
滚动触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
。
在定义scroll-view
时,要给它一个固定的高度,通过wxss
也可以内部样式,给设置个height
属性,如style="height:200px;"
。
scroll-into-view
为scroll-view
的属性,类型为String
类型,表示值应为某子元素的id
,甚至哪个方向可滚动,则在哪个方向滚动到该元素。代码中scroll-into-view="{{toView}}"
,toView
的值到js
中的data
中。
scroll-top
为scroll-view
的属性,类型为Number
类型,表示值应为设置竖向滚动条位置,同时横向有个scroll-left
属性。
<!-- index.wxml -->
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
...
</scroll-view>
给这个视图组件加几个视图,一个视图高度以给定"height:200px"
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
再给两个按钮,一个是点击效果为,下一个视图,如同翻页的效果,点击按钮切换到下一个view
,另一个按钮的点击效果为,设置滚动条位置实现画面滚动,就是下移或上移等。
click me to scroll into view
为点击我跳转到下一个view
视图
click me to scroll
为点击我进行滚动
<!-- index.wxml -->
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
</view>
scroll-view
属性表格
属性名 | 说明 |
---|---|
scroll-x | 表示允许横向滚动 |
scroll-y | 表示允许纵向滚动 |
upper-threshold | 表示距顶部或者左边多远时(单位为px ),触发scrolltoupper 事件 |
lower-threshold | 表示距底部或者右边多远时时(单位为px ),触发scrolltolower 事件 |
scroll-top | 表示设置竖向滚动条位置 |
scroll-left | 表示设置横向滚动条位置 |
scroll-into-view | 表示指应为某子元素id (id 不能以数字开头),设置哪个方向可滚动,则在哪个方向滚动到该元素 |
scroll-with-animation | 表示在设置滚动条位置时使用动画过渡 |
bindscrolltoupper | 表示滚动到顶部或左边,会触发scrolltoupper 事件 |
bindscrolltolower | 表示滚动到底部或右边,会触发scrolltolower 事件 |
bindscroll | 表示滚动时触发 |
enable-back-to-top | 表示iOS 点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 |
class="scroll-view-item bc_green"
中,在wxss
样式定义,高度为200px
,如果没有就不会出现,你可以自己试试,margin
属性定义,四周都是10px
,其它为背景颜色而已。
/* index.wxss */
/* .scroll-view_H{
white-space: nowrap;
} */
.scroll-view-item{
height: 200px;
}
/* .scroll-view-item_H{
display: inline-block;
width: 100%;
height: 200px;
} */
.btn-area button{
margin: 10px;
}
.bc_green {
background-color: green;
}
.bc_red {
background-color: red;
}
.bc_yellow {
background-color: yellow;
}
.bc_blue {
background-color: blue;
}
逻辑index.js
,upper
为滚动条滚到顶部的时候触发,lower
为滚动条滚到底部的时候触发,scroll
为滚动条滚动后触发,tap
为点击按钮切换到下一个view
,tapMove
为通过设置滚动条位置实现画面滚动。
// index.js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'green',
scrollTop: 100,
scrollLeft: 0
},
// 滚动条滚到顶部的时候触发
upper: function(e) {
console.log(e)
},
// 滚动条滚到底部的时候触发
lower: function(e) {
console.log(e)
},
// 滚动条滚动后触发
scroll: function(e) {
console.log(e)
},
// 点击按钮切换到下一个view
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
//通过设置滚动条位置实现画面滚动
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
toView: 'green'
,为scroll-into-view
显示在green
绿色的地方,在index.wxml
中的scroll-into-view="{{toView}}"
,scrollTop: 100
,为scroll-top="{{scrollTop}}"
在显示时就是绿色的占一半,红色的占一半,因为总的才200px
嘛。
scroll-top
的用途说明一下,为甚至竖向滚动条位置。scroll-into-view
为滚动到该元素,简要的说。总的来说,值应为某子元素id
(id
不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素,可知道要id
,所以在index.wxml
中有了<view id="green" class="scroll-view-item bc_green"></view>
这个描述,里面的id="green"
。
这样就可以理解以下代码:
data: {
toView: 'green',
scrollTop: 100,
scrollLeft: 0
},
// scrollLeft:是用来横向的嘛
var order = ['red', 'yellow', 'blue', 'green', 'red']
// 点击按钮切换到下一个view
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
重要事项:
开源github分享
Wechat_small_program_Share
微信小程序分享
最新文章
- Jenkins中构建Testcomplete项目的方法介绍
- 为什么google bazel构建工具流行不起来
- T-Sql(三)存储过程(Procedure)
- Xcode 运行cocos2dx弹出内部错误对话框(Internal Error)
- C++引用详解
- Linux中mod相关的命令 内核模块化 mod相关命令都是用来动态加载内核模块/驱动程序模块
- pysam - 多种格式基因组数据(sam/bam/vcf/bcf/cram/&hellip;)读写与处理模块(python)
- leetcode 142. Linked List Cycle II ----- java
- INTEL XDK 真机调试
- db.properties 数据库配置文件
- 2434: [Noi2011]阿狸的打字机 - BZOJ
- gitphp日期乱码解决方案
- chrmoe debug
- jquery之营销系统
- PHP简易计算器方法2
- mfc---获取当前时间
- Service详解
- iOS 微信消息拦截插件系列教程-附录(服务端成果展示)
- lua元表
- cf 893 E
热门文章
- docker 删除所有none的镜像
- Python-docx 读取word.docx内容
- 201621123002《java程序设计》第十二周学习总结
- openstack快速复制一台云主机系统
- 设计模式学习心得<;桥接模式 Bridge>;
- git 提交代码操作
- sqlserver 并行度
- css关于浮动的高度塌陷
- logstash报错 :backtrace=>;[";org/jruby/RubyIO.java:1457:in `write&#39;";, ";org/jruby/RubyIO.java:1428:in `write&#39;";
- Codeforces 863 简要题解