欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《二》scroll-view可滚动视图区域

发布：2018-01-25 16:40浏览： 次来源：网络 作者：tianshu

组件说明:

可滚动视图区域。

组件用法：纵向滚动用法

Tip:

  • 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。
  • 当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）
  • 当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）
效果图：


小程序极速实战开发《二》scroll-view可滚动视图区域(图1) 

wxml


  1. <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  2.     <view id="green" class="scroll-view-item bc_green"></view>
  3.     <view id="red"  class="scroll-view-item bc_red"></view>
  4.     <view id="yellow" class="scroll-view-item bc_yellow"></view>
  5.     <view id="blue" class="scroll-view-item bc_blue"></view>
  6. </scroll-view>
  7. <view class="btn-area">
  8.       <button size="mini" bindtap="tap">click me to scroll into view </button>
  9.       <button size="mini" bindtap="tapMove">click me to scroll</button>
  10. </view>


js
 
  1. var order = ['red', 'yellow', 'blue', 'green', 'red']
  2. Page({
  3.   data: {
  4.     toView: 'green',
  5.     scrollTop: 100,
  6.     scrollLeft: 0
  7.   },
  8.   //滚动条滚到顶部的时候触发
  9.   upper: function(e) {
  10.     console.log(e)
  11.   },
  12.   //滚动条滚到底部的时候触发
  13.   lower: function(e) {
  14.     console.log(e)
  15.   },
  16.   //滚动条滚动后触发
  17.   scroll: function(e) {
  18.     console.log(e)
  19.   },
  20.   //点击按钮切换到下一个view
  21.   tap: function(e) {
  22.     for (var i = 0; i < order.length; ++i) {
  23.       if (order[i] === this.data.toView) {
  24.         this.setData({
  25.           toView: order[i + 1]
  26.         })
  27.         break
  28.       }
  29.     }
  30.   },
  31.   //通过设置滚动条位置实现画面滚动
  32.   tapMove: function(e) {
  33.     this.setData({
  34.       scrollTop: this.data.scrollTop + 10
  35.     })
  36.   }
  37. })
 
css
 
  1. .scroll-view_H{
  2.   white-space: nowrap;
  3. }
  4. .scroll-view-item{
  5.   height: 200px;
  6. }
  7. .scroll-view-item_H{
  8.   display: inline-block;
  9.   width: 100%;
  10.   height: 200px;
  11. }
 
横向滚动用法
Tip:
  • 横向滚动无法使用scroll-into-view属性。
  • 当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）
  • 当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）



效果图：
 
小程序极速实战开发《二》scroll-view可滚动视图区域(图2)
 
wxml
 
  1. <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}">
  2.     <view id="green" class="scroll-view-item_H bc_green"></view>
  3.     <view id="red"  class="scroll-view-item_H bc_red"></view>
  4.     <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
  5.     <view id="blue" class="scroll-view-item_H bc_blue"></view>
  6. </scroll-view>
 

js
 
  1. var order = ['red', 'yellow', 'blue', 'green', 'red']
  2. Page({
  3.   data: {
  4.     toView: 'green',
  5.     scrollTop: 100,
  6.     scrollLeft: 0
  7.   },
  8.   //滚动条滚到顶部的时候触发
  9.   upper: function(e) {
  10.     console.log(e)
  11.   },
  12.   //滚动条滚到底部的时候触发
  13.   lower: function(e) {
  14.     console.log(e)
  15.   },
  16.   //滚动条滚动后触发
  17.   scroll: function(e) {
  18.     console.log(e)
  19.   },
  20.   //点击按钮切换到下一个view
  21.   tap: function(e) {
  22.     for (var i = 0; i < order.length; ++i) {
  23.       if (order[i] === this.data.toView) {
  24.         this.setData({
  25.           toView: order[i + 1]
  26.         })
  27.         break
  28.       }
  29.     }
  30.   },
  31.   //通过设置滚动条位置实现画面滚动
  32.   tapMove: function(e) {
  33.     this.setData({
  34.       scrollLeft: this.data.scrollLeft + 10
  35.     })
  36.   }
  37. })
 
wxss
 
  1. .scroll-view_H{
  2.   white-space: nowrap;
  3. }
  4. .scroll-view-item{
  5.   height: 200px;
  6. }
  7. .scroll-view-item_H{
  8.   display: inline-block;
  9.   width: 100%;
  10.   height: 200px;
  11. }
 
 
主要属性：
属性
类型
默认值
描述
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}





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有