微信小程序scroll-view组件

一、介绍

当一个容器内容很多时，若容器无法显示完整内容，则可通过滚动操作查看所有内容

在微信小程序中scroll-view组件可以实现滚动效果

二、scroll-view组件的属性值

（1）scroll-x 【boolean型】 允许横向滚动条，默认false

（2）scroll-y 【boolean型】 允许纵向滚动条，默认false

注意：在允许横向、纵向滚动后，还需要使scroll、view组件中内容的宽度和高度大于scroll-view组件本身的宽高才可滚动

（3）scroll-top 【number/string型】 设置竖向滚动条位置，默认为空

（4）scroll-left 【number/string型】 设置横向滚动条位置，默认为空

（5）scroll-into-view 【string型】 当前可在哪个方向滚动，则在哪个方向滚动到该元素。值为某子元素id（id不能以数字开头）

（6）scroll-with-animation 【boolean型】 在设置滚动条位置时是否使用动画过渡，默认为false

（7）bindscrolltoupper 【eventhandle绑定数据处理】 滚动到顶部/左边时触发的事件

（8）bindscrolltolower 【eventhandle】 滚动到底部/右边时触发的事件

（9）bindscroll 【eventhandle】 滚动时触发的事件

若在wxml代码里使用bindscroll绑定一个函数，在js文件里编写e.detail，输出结果为：具体见三、代码

e.detail为自定义事件所携带的数据，下面为e.detail获取到的信息：

(9-1)scrollLeft 横向滚动条左侧到视图左边的距离

(9-2)scrollTop 横向滚动条上端到视图顶部的距离

(9-3)scrollHeight 纵向滚动条在Y轴上最大滚动距离

(9-4)scrollWidth 横向滚动条在X轴上最大滚动距离

(9-5)deltaX 横向滚动条的滚动状态

(9-6)deltaY 纵向滚动条的滚动状态

代码示例：

配置好微信小程序文件后，

在index.wxml文件中：

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y scroll-x type="list" style="height: 200px;"  bindscroll="text1">
<!-- 一、scroll-view组件 -->
  <view style="width: 200%;height: 800px; background-image: linear-gradient(to bottom right,red,yellow);">
  </view>
</scroll-view>

在index.css文件中：

Page({
    text1:function(e){
        console.log(e.detail);
    }
})

如下图，我设置了scroll-x和scroll-y允许了横纵向的移动。bindscroll绑定了text1这一触发事件,输出e.detail获取到的信息。