小编 / 达叔小生

小程序开发基础-scroll-view 可滚动视图区域

这里只展示纵向滚动,横向同理就不用说明了,可自己尝试,横向滚动属性为scroll-x,把纵向滚动改为横向滚动即可。

scroll-view视图组件

scroll-yscroll-view的属性,scroll-y类型为Boolean,默认值为false,表示允许纵向滚动,scroll-y="true"允许纵向滚动

bindscrolltoupperscroll-view的属性,bindscrolltoupper类型为EventHandle,表示滚动到顶部/左边,会触发scrolltoupper事件,顶部/左边,是因为滚动视图可以横向滚动和纵向滚动,bindscrolltoupper="upper"定义绑定事件,在逻辑代码中编写,滚动到顶部,触发scrolltoupper事件。

bindscrolltolowerscroll-view属性,与上述bindscrolltoupper同理,bindscrolltolower的类型也是EventHandlebindscrolltolower表示滚动到底部/右边,会触发scrolltolower事件,bindscrolltolower="lower"表示绑定事件lower,会触发scrolltolower事件。

bindscrollscroll-view属性,类型是EventHandle,表示滚动触发,与上述bindscrolltoupper属性和bindscrolltolower属性范围广,bindscroll滚动触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

在定义scroll-view时,要给它一个固定的高度,通过wxss也可以内部样式,给设置个height属性,如style="height:200px;"

scroll-into-viewscroll-view的属性,类型为String类型,表示值应为某子元素的id,甚至哪个方向可滚动,则在哪个方向滚动到该元素。代码中scroll-into-view="{{toView}}"toView的值到js中的data中。

scroll-topscroll-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 表示指应为某子元素idid不能以数字开头),设置哪个方向可滚动,则在哪个方向滚动到该元素
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.jsupper为滚动条滚到顶部的时候触发,lower为滚动条滚到底部的时候触发,scroll为滚动条滚动后触发,tap为点击按钮切换到下一个viewtapMove为通过设置滚动条位置实现画面滚动。

// 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为滚动到该元素,简要的说。总的来说,值应为某子元素idid不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素,可知道要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 可滚动视图区域的更多相关文章

  1. 小程序开发基础-swiper 滑块视图容器

    小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...

  2. 微信小程序开发基础

    前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com ...

  3. 小程序开发-基础组件icon/text/progress入门

    小程序的基础组件--基础内容 基础内容分为三大组件: 1. icon--图标 index.wxml <view class="group"> <block wx: ...

  4. 小程序开发基础-view视图容器

    view 视图容器. // wxml <view class="section"> <view class="section__title"& ...

  5. 微信小程序开发基础知识总结

    微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...

  6. 微信小程序开发教程(八)视图层——.wxml详解

    框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...

  7. 微信小程序开发---视图层(View)

    WXML WXML能力: 数据绑定 列表渲染 条件渲染 模板 事件 数据绑定 数据绑定使用 Mustache 语法(双大括号)将变量包起来,可作用于内容,组件属性(需要在双引号之内),控制属性(需要在 ...

  8. 微信小程序开发教程(九)视图层——.wxss详解

    WXSS是一套样式语言,用于描述WXML的组件样式. 官方文档表示,WXSS的选择器目前支持(“.class”.“#id”.“elemnt”.“element,element”.“::after”.“ ...

  9. 【微信小程序】基础组件--view text image

    组件的通用属性: id class style hidden bind* catch* data-* view 小程序基础组件,基本等于最常用组件,类似于HTML中的div.view用于构建页面骨架, ...

随机推荐

  1. CentOS7 下安装GUI图形界面GNOME

    在安装Gnome包之前,需要检查一下网络是否有网络(使用ping www.baidu.com) 一.先装X windows,-y表示参数同意所有软件安装操,当出现 Complete!说明这里安装成功了 ...

  2. Decoders Matter for Semantic Segmentation:Data-Dependent Decoding Enables Flexible Feature Aggregation

    Decoders Matter for Semantic Segmentation:Data-Dependent Decoding Enables Flexible Feature Aggregati ...

  3. qt布局管理-缩放、多窗口切换

    关于缩放的布局 所有控件要求与主窗口同时缩放,那么在所有控件设置好布局后,最后点击最外侧的主控件,选择水平布局或者垂直布局即可. 另外每个空间的属性可更改,如SizePolicy用于设置空间是否可缩放 ...

  4. java--利用DecimalFormat.java类将给定的数字进行格式化

    1.数字格式化元素:# 任意数字, 千分位. 小数点0 不够补0 2.实例 //及得import java.text.DecimalFormat import java.text.DecimalFor ...

  5. 第二阶段第九次spring会议

    今天我将对软件进行宠物信息的添加. 清屏功能 private void button5_Click(object sender, EventArgs e) { textBox2.Text = &quo ...

  6. shell脚本学习-练习写一个脚本1

    # 1.依次展示/etc/passwd中的用户名和UID.格式如:Hello,$USER,your UID is $UID. # 2.统计一个有多少个用户 #!/bin/bash #Program D ...

  7. ACM(数学问题)——UVa202:输入整数a和b(0≤a≤3000,1≤b≤3000),输出a/b的循环小数表示以及循环节长度。

    主要思路: 通过模拟除法运算过程,来判断循环节结束的位置,不断将余数*10再对除数取余得到新的余数,并记录下来,知道出现的余数之前出现过,此时小数开始循环. 例如: 假设   ->     a ...

  8. Listener随笔

    [1]监听器简介   > Listener是JavaWeb中三大组件之一.Servlet.Filter.Listener   > 三大组件都有的共同特点,都需要实现一个接口,并在web.x ...

  9. Koa源码分析(三) -- middleware机制的实现

    Abstract 本系列是关于Koa框架的文章,目前关注版本是Koa v1.主要分为以下几个方面: Koa源码分析(一) -- generator Koa源码分析(二) -- co的实现 Koa源码分 ...

  10. pytest框架之fixture详细使用

    本人之前写了一套基于unnitest框架的UI自动化框架,但是发现了pytest框架之后觉得unnitest太low,现在重头开始学pytest框架,一边学习一边记录,和大家分享,话不多说,那就先从p ...