小程序开发基础-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
微信小程序分享
小程序开发基础-scroll-view 可滚动视图区域的更多相关文章
- 小程序开发基础-swiper 滑块视图容器
小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...
- 微信小程序开发基础
前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com ...
- 小程序开发-基础组件icon/text/progress入门
小程序的基础组件--基础内容 基础内容分为三大组件: 1. icon--图标 index.wxml <view class="group"> <block wx: ...
- 小程序开发基础-view视图容器
view 视图容器. // wxml <view class="section"> <view class="section__title"& ...
- 微信小程序开发基础知识总结
微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...
- 微信小程序开发教程(八)视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
- 微信小程序开发---视图层(View)
WXML WXML能力: 数据绑定 列表渲染 条件渲染 模板 事件 数据绑定 数据绑定使用 Mustache 语法(双大括号)将变量包起来,可作用于内容,组件属性(需要在双引号之内),控制属性(需要在 ...
- 微信小程序开发教程(九)视图层——.wxss详解
WXSS是一套样式语言,用于描述WXML的组件样式. 官方文档表示,WXSS的选择器目前支持(“.class”.“#id”.“elemnt”.“element,element”.“::after”.“ ...
- 【微信小程序】基础组件--view text image
组件的通用属性: id class style hidden bind* catch* data-* view 小程序基础组件,基本等于最常用组件,类似于HTML中的div.view用于构建页面骨架, ...
随机推荐
- [转]vue跨域解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
- 从本地上传项目到 github 以及从github 下载项目到本地环境
前置条件:成功安装github,安装成功后,要配置密钥,不然上传不成功,要报错 具体上传步骤: git init //初始化 git add 文件名 //更新文件 git commit -m ...
- python基础 ---time,datetime,collections)--时间模块&collections 模块
python中的time和datetime模块是时间方面的模块 time模块中时间表现的格式主要有三种: 1.timestamp:时间戳,时间戳表示的是从1970年1月1日00:00:00开始按秒计算 ...
- linux下编译protobuf(可以编译成pb.go)
编译前需要安装gtest $ cd googletest $ cmake -DBUILD_SHARED_LIBS=ON . $ make $ sudo cp -a include/gtest /hom ...
- experiment 3
#include <stdio.h> int main() { int number, max, min, n; n=; printf("请输入%d个数: ", n); ...
- 基于xposed实现android注册系统服务,解决跨进程共享数据问题
昨花了点时间,参考github issues 总算实现了基于xposed的系统服务注入,本文目的是为了“解决应用之间hook后数据共享,任意app ServiceManager.getService就 ...
- iOS 关于重定向的那些事(NSURLProcotol-WKWebView)
重定向定义:重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置(如:网页重定向.域名的重定向.路由选择的变化也是对数据报文经由路径的一种重定向). NSURLProt ...
- 20155312 张竞予 Exp7 网络欺诈防范
Exp7 网络欺诈防范 目录 基础问题回答 (1)通常在什么场景下容易受到DNS spoof攻击 (2)在日常生活工作中如何防范以上两攻击方法 实验总结与体会 实践过程记录 (1)简单应用SET工具建 ...
- 【js jQuery】map集合 循环迭代取值---以及 map、json对象、list、array循环迭代的方法和区别
后台给前台传来一个map @ResponseBody @RequestMapping(value = "getSys") public Map<Long,String> ...
- laravel 对接 UCenter 基础
说明:1,运行环境 laravel 5.3 php7+nginx+mysql 2,使用安装包 https://github.com/goodspb/laravel5-ucenter 上面有对接方 ...