微信小程序-scrollview

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-24

37.微信小程序-scrollview2023-05-13

38.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

我们首先来简单搭建一个布局利用 scroll-view，index.wxml 代码如下:

<scroll-view class="container">
    <block wx:for="{{colors}}" wx:key="*this">
        <view class="item" style="background: {{item}}">{{item}}</view>
    </block>
</scroll-view>

对应的样式代码如下 index.wxss:

.item{
    height: 100px;
    text-align: center;
}
.container{
    background: black;
}

!> 默认情况下 scroll-view 是无法滚动的，如果想让 scroll-view 进行滚动，那么必须告诉 scroll-view 在哪个方向上进行滚动，并且还需要设置这个方向的尺寸才可以进行滚动。

例如我这里想让 scroll-view 进行 y 轴滚动，给 scroll-view 设置一个属性叫做 scroll-y: 告诉 scroll-view 可以在垂直方向滚动。

听了我这么一番话之后去index.wxml设置一下scroll-y：

<scroll-view class="container" scroll-y>
       <block wx:for="{{colors}}" wx:key="*this">
              <view class="item" style="background: {{item}}">{{item}}</view>
       </block>
</scroll-view>

设置了之后发现还是不能进行滚动，上面的注意点我已经说了，还需要设置一个对应方向的尺寸才可以，又去wxss设置了下scroll-view的高度，我再次调试可以进行滚动了。

.container{
  background: black;
  height: 300px;
}

上面介绍的是 y 轴方向，在来看看 x，x 当中有一些注意点，所以我这里就才特意拿出来进行说明。

想进行 x 滚动，也是一样的，告诉scroll-view一个属性, 为 scroll-x 让scroll-view可以在水平方向上滚动。

<scroll-view class="container" scroll-x>
       <block wx:for="{{colors}}" wx:key="*this">
              <view class="item" style="background: {{item}}">{{item}}</view>
       </block>
</scroll-view>

然后我发现，我的元素排版有问题，我这里想用 display: flex 进行布局，发现微信开发者工具的控制台给出了警告，警告是内容是 [pages/index/index] 设置 enable-flex 属性以使 flexbox 布局生效。 说明一个问题，我们想使用 flex 布局就需要告诉 scroll-view 开启这个 flex 布局，我们就再加一下吧~。

<scroll-view class="container" enable-flex scroll-x>
       <block wx:for="{{colors}}" wx:key="*this">
              <view class="item" style="background: {{item}}">item</view>
       </block>
</scroll-view>

样式文件代码：

.item{
  height: 100px;
  width: 100px;
  flex-shrink: 0;
}
.container{
  height: 200px;
  background: #333;
  display: flex;
}

这样子就可以进行 x 滚动了，我这里补充一条注意点，防止有的人粗心大意。

!> 默认情况下，是无法将scroll-view变成flex布局的，如果想将scroll-view变成flex布局，那么必须通过enable-flex属性

如上的内容其实在官方文档当中都有写出来，我这里就是带大家上手看看，在来看几个属性这篇文章就可以结束了，后续的一些内容，等我做项目我在出。

scroll-into-view

值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素，就是说，在初始化的时候我们可以直接让scroll-view默认选中某一个指定id的元素，相当于自动为我们滚动到指定的元素进行展示。

首先需要给每一个元素绑定一个id：

<view id="to{{index}}" class="item" style="background: {{item}}">item</view>

我这里为了更好的显示这个效果我将 .item 的样式进行了调整，宽度设置为了 375 这样子就每一个元素的展示就是一整个屏幕。

.item{
  height: 100px;
  width: 375px;
  flex-shrink: 0;
}

给scroll-view设置scroll-into-view="to2"。

bindscroll

滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

简单的绑定和打印一下事件对象：

<scroll-view 
class="container"
enable-flex 
scroll-x
bindscroll="onScroll"
>
       <block wx:for="{{colors}}" wx:key="*this">
              <view class="item" style="background: {{item}}">item</view>
       </block>
</scroll-view>

index.js:

Page({
  onScroll(e){
    console.log(e);
  }
})

在监听方法的事件对象中：

• deltaX 表示滚动的方向：如果是负值，表示往左边滚动，如果是正值，表示往右边滚动
• deltaY 表示滚动方向，具体正值和负值是上还是下，自己下去实验
• scrollHeight/scrollWidth：表示整个scroll-view的高度和宽度
• scrollLeft：左边滚出去了多少
• scrollTop：同理可证

bindscrolltoupper

滚动到顶部/左边时触发

bindscrolltolower

滚动到底部/右边时触发

index.wxml:

<scroll-view 
class="container"
enable-flex 
scroll-x
bindscrolltoupper="onScrollToupper"
bindscrolltolower="onScrollLower"
>
       <block wx:for="{{colors}}" wx:key="*this">
              <view class="item" style="background: {{item}}">item</view>
       </block>
</scroll-view>

index.js:

Page({
  onScrollToupper(){
    console.log("滚动到最上面或者最左边了");
  },
  onScrollLower(e){
    console.log("滚动到最下面或者最右边了");
  }
})

其实这两个属性也并不是滚动到最左边或者最右边才被触发事件的，是与左右两边有一段距离的，这个距离是可以进行设置的。通过 upper-threshold/lower-threshold 进行设置，这两个属性有函数节流，我这里其实觉得吧，可以直接使用官方设置好的距离即可。

upper-threshold

距顶部/左边多远时，触发 scrolltoupper 事件

lower-threshold

距底部/右边多远时，触发 scrolltolower 事件

index.wxml:

<scroll-view 
class="container"
enable-flex 
scroll-x
upper-threshold="{{0}}"
lower-threshold="{{0}}"
bindscrolltoupper="onScrollToupper"
bindscrolltolower="onScrollLower"
>
       <block wx:for="{{colors}}" wx:key="*this">
              <view class="item" style="background: {{item}}">item</view>
       </block>
</scroll-view>

这么一设置就代表就与左右两边的距离不存在偏移了。但是有节流问题，效果也并不是很好，所以说还是得要按照以后企业开发当中的需求而定。