mpvue中的scroll-top值无效

Question

我想用scroll-view实现上拉加载，下拉刷新的橡皮经弹回效果，但是在设置scroll-top的值的时候，并没有弹回，请大佬们帮忙看看

贴代码：

<template>
  <div class="bg index">
    <div :style="listCardH">
        <scroll-view :scroll-y="true" :scroll-with-animation="true"  :scroll-top="scrolledTop" @scrolltoupper="refresh" @scrolltolower="loadMore" @scroll="scrolling" @touchstart="scrollTouchStart" @touchend="scrollTouchEnd" style="height: 100%;">
            <div>loading...</div>
            <div class="list white-bg" v-for="(item,index) in list1.list" :key="index" @click="goDetail">
              {{item.name}}
            </div>
            <div v-if="list1.showLoading" >loading...</div>
            <div v-if="!list1.showLoading" class="no-more">没有更多了</div>
          
        </scroll-view>
    </div> 
  </div>
</template>

<template>
  <div class="bg index">
    <div :style="listCardH">
        <scroll-view :scroll-y="true" :scroll-with-animation="true"  :scroll-top="scrolledTop" @scrolltoupper="refresh" @scrolltolower="loadMore" @scroll="scrolling" @touchstart="scrollTouchStart" @touchend="scrollTouchEnd" style="height: 100%;">
            <div>loading...</div>
            <div class="list white-bg" v-for="(item,index) in list1.list" :key="index" @click="goDetail">
              {{item.name}}
            </div>
            <div v-if="list1.showLoading" >loading...</div>
            <div v-if="!list1.showLoading" class="no-more">没有更多了</div>
          
        </scroll-view>
    </div> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClose: true, // 判断当前页面是打开还是返回页
      currListCard: 0,
      listCardH: '',
      scrollingTop: 0,
      scrolledTop: 0,
      scrollHeight: 0,
      scrollWrapHeight: 0,
      list1: {
        list: [],
        showLoading: false,
        pageInfo: {
          pageNum: 1,
          pageSize: 20,
          totalPages: 0
        }
      }
    };
  },

  components: {},

  methods: {
    /**
     * 下拉 刷新
     */
    refresh(e) {
      console.log('refresh----e=', e);
      this.list1.pageInfo.pageNum = 1;
      this.list1.list = [];
      this.initList1();
    },

    /**
     * 上拉加载
     */
    loadMore(e) {
      if (this.list1.pageInfo.pageNum < this.list1.pageInfo.totalPages) {
        this.list1.pageInfo.pageNum++;
        this.initList1();
        this.list1.showLoading = true;
      } else {
        this.list1.showLoading = false;
      }
    },

    scrolling(e) {
      this.scrollingTop = e.mp.detail.scrollTop;
      this.scrollHeight = e.mp.detail.scrollHeight;
      if (this.scrollingTop < 100) {
        this.scrolledTop = 80;
        // console.log('下拉刷新结束');
      }
    },

    scrollTouchStart() {
      console.log('scrollTouchStart');
    },

    scrollTouchEnd() {
      console.log('scrollTouchEnd');

      if (this.scrollingTop < 100) {
        this.scrolledTop = 80;
        console.log('下拉刷新结束');
      }

      if (this.scrollHeight - this.scrollingTop - this.scrollWrapHeight <= 10) {
        console.log('上拉加载');
        this.scrolledTop = this.scrollHeight - this.scrollWrapHeight + 10;
      }
    },

    /**
     * list1数据
     */
    initList1() {
      this.list1.pageInfo.totalPages = 5;
      for (let i = 0; i < this.list1.pageInfo.pageSize; i++) {
        this.list1.list = [
          ...this.list1.list,
          { name: `list${this.list1.pageInfo.pageNum}-${i}` }
        ];
      }
    },

    /**
     * 初始化scroll-view的高度
     */
    initScrollViewHeight() {
      this.$wxPromisify(wx.getSystemInfo)()
        .then(res => {
          console.log('res[2].windowHeight=', res.windowHeight);
          this.listCardH = `height:${res.windowHeight - 50}px`;
          this.scrollWrapHeight = res.windowHeight - 50;
          this.scrollHeight = res.windowHeight;
        })
        .catch(err => console.error(err));
    },

    /**
     * 跳转详情页
     */
    goDetail() {
      this.isClose = false;
      wx.navigateTo({
        url: `/pages/detail/main`
      });
    }
  },

  /**
   * 微信底部上拉事件和 scroll-view 选其一使用即可
   */
  onReachBottom() {
    console.log('上拉');
  },

  created() {},
  mounted: async function () {
    this.scrolledTop = 80;
    this.initScrollViewHeight();
    this.initList1();
  },
};
</script>

以上就是代码了，还请各位走过路过的大佬帮忙看看是该怎么解决呢？鞠躬

Answer 1

这个是mpvue的bug，其实也算不上bug，算是设定。
当你设置scrolledTop这个值的时候，mpvue会去检测当前的scrolledTop 的值，如果两个值相同，就不会去setData，也就不会去修改滚动条的位置。
现在我的解决办法是，比如你要每次把滚动条的高度设为80，那你就每次都
this.scrolledTop = 79;
this.scrolledTop = 80;
这样的话每次修改scrolledTop 的时候,scrolledTop 的值就都是不同的了。
不过应该还会有更好的解决办法。

Answer 2

我最近也在看这个问题，我要的就是一个回到顶部的功能。
原生没问题，mpvue好像就是不行。
按照官方的github的#500和#603的解决办法
我试了，还是不行。。。可能是我的功力不够

他们评论有说不用scroll-view组件的，有说这部分用原生写的

我现在在弃坑的边缘