（六）scroll-view 组件

最新推荐文章于 2024-07-19 09:44:13 发布

luckybing~

最新推荐文章于 2024-07-19 09:44:13 发布

阅读量801

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/107932621

版权

本文详细介绍了小程序中scroll-view组件的使用，包括横向和纵向滚动、scroll-into-view属性实现滚动到指定位置、scroll-with-animation平滑滚动效果，以及如何避免内容变化时的页面抖动问题。同时，讲解了上拉加载和下拉刷新的功能实现，提供相关代码示例。

摘要由CSDN通过智能技术生成

（一）横向滚动、纵向滚动

scroll-x scroll-y

<view>
  <view class="box">
    <!-- 纵向滚动 -->
    <scroll-view class="wrapper" scroll-y>
      <view id="1" class="view demo-1">A</view>
      <view id="2" class="view demo-2">B</view>
      <view id="3" class="view demo-3">C</view>
    </scroll-view>


    <!-- 横向滚动 -->
    <scroll-view class="x-wrapper" scroll-x>
      <view id="1" class="view demo-1">A</view>
      <view id="2" class="view demo-2">B</view>
      <view id="3" class="view demo-3">C</view>
    </scroll-view>
  </view>
</view>

同时配合css

.view {
  height: 400px;
  width: 100%;
  /* 必须是 inline-block 给父元素设置display: flex 不好使 */
  display: inline-block;
}

.demo-1 {
  background: red;
}

.demo-2 {
  background: green;
}

.demo-3 {
  background: yellow;
}

.wrapper {
  height: 500px;
}

.x-wrapper {
  white-space: nowrap;
  height: 400px;
  margin: 100px 0;
}

（二）scroll-into-view

wxml:

<view class="box">
    <!-- 纵向滚动 -->
    <scroll-view class="wrapper" scroll-y scroll-into-view="{
  { targetIndex }}" scroll-with-animation="{
  { true }}">
      <view id="block1" class="view demo-1">A</view>
      <view id="block2" class="view demo-2">B</view>
      <view id="block3" class="view demo-3">C</view>
    </scroll-view>

    <button bindtap="scrollTarget" data-id="1">go A</button>
    <button bindtap="scrollTarget" data-id="2">go B</button>
    <button bindtap="scrollTarget" data-id="3">go C</button>
  </view>

js：

Page({
  data: {
    targetIndex: 'block1'
  },
  scrollTarget (e) {
    this.setData({
      targetIndex: `block${e.currentTarget.dataset.id}`
    })
    console.log(e.currentTarget.dataset.id)
  }
})

涨知识：

1. scroll-into-view 绑定id，当点击按钮的时候，改变绑定id，达到滚动到可是区域的效果

2. 小程序传参数需要在标签上绑定 data-参数名称，e.currentTarget.dataset.参数名称获取

3. scroll-with-animation 滚动的时候会有动画，缓慢的平滑

4. 每个 view 的 id 不能以数字开头<