微信小程序开发中踩坑记录

scroll-view开发过程中发现ios下，下拉刷新时页面抖动

像鬼畜一下，频繁抖动。
后来发现，当添加enhanced属性时，（2024年6月26日发现官方文档去掉了这个属性）， scroll-view的顶部上面没有元素时（也就是wxm里第一个元素就是scroll-view)，下拉时会触发顶部回弹效果，导致频繁抖动。

• 所以 要么不要添加enhanced这个属性（估计官方就是发现这个有兼容性问题才去掉了）
• 要么 设置margin-top属性，不要让scroll-view紧挨着顶部

结果：抖动的现象不必现了，但是某些情况下还是会有抖动的情况！家人们，所以最终还是弃用scroll-view了，改为页面级的滚动效果，onReachBottom、onPullDownRefresh、wx.pageScrollTo等事件实现功能.

方案1:

<view>
  <scroll-view
    style="padding-top:{{menuBtnHe}}px"
    class="main-content-area"
    scroll-y
    show-scrollbar="{{false}}"
    refresher-enabled
    refresher-default-style="none"
    refresher-background="transparent"
    refresher-triggered="{{triggered}}"
    bindscrolltolower="lower"
    bindrefresherrefresh="onRefresh"
    scroll-top="{{mainScroll}}"
    scroll-with-animation="{{animationFlag}}"
    refresher-threshold="100"
    enable-passive="{{true}}"
    bindscroll="viewScroll">
    瀑布流区域
    </scroll-view>
</view>

方案2:（注意enhanced的区别，但是这种情况下，scroll-view的高度就要动态计算，减去margin-top的距离，不然底部的部分内容会被遮挡）

<view>
  <scroll-view
    enhanced
    style="margin-top:{{menuBtnHe}}px"
    class="main-content-area"
    scroll-y
    show-scrollbar="{{false}}"
    refresher-enabled
    refresher-default-style="none"
    refresher-background="transparent"
    refresher-triggered="{{triggered}}"
    bindscrolltolower="lower"
    bindrefresherrefresh="onRefresh"
    scroll-top="{{mainScroll}}"
    scroll-with-animation="{{animationFlag}}"
    refresher-threshold="100"
    enable-passive="{{true}}"
    bindscroll="viewScroll">
    瀑布流区域
    </scroll-view>
</view>

scroll-view，设置scroll-top为0时——也就是点击一个按钮，然后置顶的效果，会出现白屏，ios手机

• 解决方案： 设置scroll-with-animation为true
  因为切换tab的时候不想要动画效果，所以置顶后再取消重制为false

<scroll-view
  scroll-with-animation="{{animationFlag}}">
  瀑布流区域
</scroll-view>

// 返回顶部
  backTop: throttle(function() {
    // 解决scroll-view滚动到顶部出现白屏的场景
    this.setData({
      animationFlag: true
    }, () => {
      this.setData({
        showCityTabFix: false,
        mainScroll: 0,
        animationFlag: false
      })
    })
    // wx.pageScrollTo({
    //   scrollTop: 0,
    //   duration: 500
    // })
    // const waterFallComp = this.selectComponent('#water-fall-container');
    // waterFallComp && waterFallComp.scrollViewToTop();
    this.setTracer({
      action: 'bactToTop_click',
      label: '回到顶部_点击',
    })
  }, 500, { leading: true, trailing: false }),

当tab-list元素fix吸顶状态时，如何保持一直吸顶状态，下面的列表数据显示第一个元素。

• 1. 切换tab,获取数据后，执行wx.pageScrollTo滚动到指定位置。
• 2. 注意 scrollTop 的临界值要">=",不然吸顶状态下，切换tab, wx.pageScrollTo的时候，tab-list不会吸顶。
• 3. 注意，下面的瀑布流列表数据也要给足够的高度，tab-list不然也不会吸顶。

//tab点击
tabActive(e) {
  const {tabId, tabName} =  e.detail.currentTarget.dataset.item
  // 重复点击同一个tab返回
  if (this.data.selectTab == tabId) {return}
  
  // 清空数据
  this.setData({
    hasMore: true,
    current: 1,
    size: 10,
    initData: [],
    selectTab: tabId,
    selectTabName: tabName,
  }, () => {
    // 获取列表数据
    this.getArticleListByTab()
  })
},
// 获取数据成功后，通过`wx.pageScrollTo`滚动到指定位置保持吸顶状态
// this.data.fixHe 滚动的距离
setDataSuccess() {
  // 子组件渲染数据成功且顶部tab在fix状态下 并且不是下拉加载更多的情况（也就是第一次点击tab)
  // 因为是请求后才触发此方法，current就变成了2 其实表示就是第一页
  if ((this.data.current == 2) && this.data.showCityTabFix) {
    wx.pageScrollTo({
      scrollTop: this.data.fixHe,
      duration: 0,
    })
  }
},
/**
 * 页面滚动
 */
onPageScroll(res) {
  let scrollTop = res?.scrollTop ? parseInt(res.scrollTop) : 0;
  this.setData({
    showCityTabFix: scrollTop >= this.data.fixHe,
  })
},

.list-area {
	width: 100vw;
	min-height: 80vh; /*给一个足够的高度才能保持吸顶效果*/
	background: #FFFFFF;
	padding-bottom: 80rpx;
}