scroll-view可滚动视图区域组件说明:

可滚动视图区域。

组件用法：纵向滚动用法

Tip:

  • 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。
  • 当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）
  • 当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）
scroll-view可滚动视图区域的示例代码运行效果如下：  
 
 
 

下面是WXML代码：

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
<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>
下面是JS代码：
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  //通过设置滚动条位置实现画面滚动
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})
下面是WXSS代码：
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
横向滚动用法
Tip:
  • 横向滚动无法使用scroll-into-view属性。
  • 当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）
  • 当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）
横向滚动用法的效果图：
下面是WXML代码：
[XML] 纯文本查看 复制代码
1
2
3
4
5
6
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
下面是JS代码：
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  //通过设置滚动条位置实现画面滚动
  tapMove: function(e) {
    this.setData({
      scrollLeft: this.data.scrollLeft + 10
    })
  }
})
下面是WXSS代码：
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
scroll-view可滚动视图区域的主要属性：
属性
类型
默认值
描述
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}

点击查看原文

最新文章

  1. 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。
  2. Atitit 项目管理（5）----------后勤管理与工具链支持管理
  3. javaweb回顾第十二篇监听器
  4. C#dynamic关键字(1)
  5. MySQL 的 utf8_general_ci 和 utf8_unicode_ci 有什么区别，应如何选择？
  6. 在Java中&gt;、&gt;&gt;、&gt;&gt;&gt;三者的区别
  7. tar split命令
  8. WebClient模拟发送Post请求
  9. (七)后台.apsx.cs获取前台客户端文本框的内容
  10. oracle exp imp
  11. Linux 命令整理
  12. Redis详解
  13. [Tyvj模拟赛]运
  14. java程序可以跨平台运行的原因
  15. CentOS下puppet安装
  16. 水题:P2799 国王的魔镜
  17. 游戏客户端Session的统一管理
  18. 搭建Fabric网络（三）artifacts是怎么生成的：cryptogen和configtxgen
  19. 【转】对cocos2d 之autorelease\ratain\release的理解
  20. talk is cheap, show me the code——dcgan,wgan,wgan-gp的tensorflow实现

热门文章

  1. 卸载MySQL 5.0
  2. td里面嵌套img标签后如何消除图片间隔
  3. psping
  4. 抢占式内核与非抢占式内核中的自旋锁（spinlock）的差别
  5. android XXXActivity和getApplicationContext()差别
  6. easyUI的treegrid添加节点（append）时间过长，设置等待（wait）遮罩效果
  7. (转)C3P0配置
  8. 解决Eclipse alt+/不出来提示的问题
  9. iOS 证书详解
  10. Spring实战笔记