scroll-view 使用详解：常见用法、最佳实践与问题解决

<scroll-view 
  scroll-y="{{true}}" 
  style="height: 300rpx;"
>
  <view wx:for="{{list}}" wx:key="id">
    {{item.text}}
  </view>
</scroll-view>

<scroll-view 
  scroll-y 
  class="scroll-list"
  bindscroll="onScroll"
>
  <view class="item" wx:for="{{items}}" wx:key="id">
    {{item.title}}
  </view>
</scroll-view>

.scroll-list {
  height: 600rpx; /* 必须设置高度 */
  overflow: hidden;
}

<scroll-view 
  scroll-x 
  class="horizontal-scroll"
  show-scrollbar="{{false}}"
>
  <view class="tag" wx:for="{{tags}}" wx:key="id">
    {{item.name}}
  </view>
</scroll-view>

.horizontal-scroll {
  white-space: nowrap;
  padding: 20rpx 0;
}
.tag {
  display: inline-block;
  width: 160rpx;
  margin-right: 20rpx;
}

// JS
this.setData({
  targetMsgId: 'msg_123'
})

<scroll-view 
  scroll-y 
  scroll-into-view="{{targetMsgId}}"
  scroll-with-animation
>
  <view wx:for="{{messages}}" wx:key="id" id="msg_{{item.id}}">
    {{item.content}}
  </view>
</scroll-view>

<scroll-view 
  scroll-y 
  bindscrolltolower="loadMore"
  style="height: 80vh;"
>
  <!-- 列表内容 -->
  <view wx:if="{{loading}}">加载中...</view>
</scroll-view>

Page({
  data: {
    page: 1,
    loading: false,
    list: []
  },
  loadMore() {
    if (this.data.loading) return;
    this.setData({ loading: true });
    
    fetchData(this.data.page + 1).then(res => {
      this.setData({
        list: [...this.data.list, ...res.data],
        page: this.data.page + 1,
        loading: false
      });
    });
  }
})

.container { height: 100vh; display: flex; flex-direction: column; }
.header, .footer { flex-shrink: 0; }
.scroll-area { flex: 1; }

// 数据预处理
const messages = originalData.map(item => ({
  ...item,
  viewId: `msg_${item.id}` // 预生成 id
}));

// 滚动前加微延迟（兼容 iOS）
setTimeout(() => {
  this.setData({ scrollToView: 'msg_123' });
}, 50);

<image src="{{item.img}}" lazy-load />

onScroll: throttle(function(e) {
  // 处理逻辑
}, 100)

<scroll-view 
  refresher-enabled
  refresher-triggered="{{refreshing}}"
  bindrefresherrefresh="onRefresh"
>
  <!-- 内容 -->
</scroll-view>

onRefresh() {
  this.setData({ refreshing: true });
  fetchData().then(() => {
    this.setData({ refreshing: false }); // ⭐️ 必须关闭
  });
}

// 工具函数
function throttle(fn, delay = 100) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

// 页面中使用
Page({
  onScroll: throttle(function(e) {
    console.log('滚动位置:', e.detail.scrollTop);
    // 懒加载、吸顶等逻辑
  }, 16) // ~60fps
})

onScroll(e) {
  const scrollTop = e.detail.scrollTop;
  const isSticky = scrollTop > 100;
  this.setData({ isHeaderSticky: isSticky });
}

<view class="{{isHeaderSticky ? 'header-sticky' : 'header-normal'}}">
  吸顶标题
</view>

onScroll(e) {
  const { scrollTop, scrollHeight, clientHeight } = e.detail;
  const percent = Math.min(100, scrollTop / (scrollHeight - clientHeight) * 100);
  this.setData({ scrollPercent: percent.toFixed(0) });
}

/* app.wxss */
page {
  height: 100%;
  overflow: hidden; /*  关键 */
}