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

标题图

小编 / 达叔小生

查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

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

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

效果图1

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属性表格

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.jsvar 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      }    }  },

重要事项：

重要事项.png

开源github分享

Wechat_small_program_Share
微信小程序分享??
Github 欢迎 Star、Fork

结语

• 本文主要讲解 小程序开发基础-scroll-view 可滚动视图区域
• 下面我将继续对其余知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞

送?