新手求助，vue用better-scroll下拉跟上拉数据重复提交怎么解决

Question

v-for="(rec, index) in recommend"
:rec = rec
:key="index"
/>

<script>
  import {mapState} from 'vuex'
  import ShopList from './../../components/ShopList/ShopList'
  import BScroll from 'better-scroll';

  import {Indicator} from 'mint-ui';

  export default {
    name: "Recommend",
    data(){
      return {
        page:1,
        count:10,
      }
    },
    mounted() {
      Indicator.open('正在加载数据...');
      this.$store.dispatch('reqRecommend', {
        page: this.page, count: this.count, callback: () => {
          Indicator.close();
        }
      });
    },
    computed:{
      ...mapState(['recommend'])
    },
    components: {
      ShopList
    },
    watch: {
      recommend() {
        this.$nextTick(() => {
          // 让当前的页码+1
          this.page += 1;
          // 初始化
          this._initBScroll();
        })
      }
    },
    methods:{
      _initBScroll() {
        // 1.1 初始化
        this.listScroll = new BScroll('.recommend_container', {
          scrollY: true,
          probeType: 2
        });

        //列表滚动
        this.listScroll.on('touchEnd',(pos) => {
          //监听下拉
          if(pos.y >= 50){
            console.log('下拉刷新');

            Indicator.open('正在加载数据...');
            this.$store.dispatch('reqRecommend', {page: this.page, count: this.count, callback: ()=>{
                Indicator.close();
              }});

          }

          //监听上拉
          if (this.listScroll.maxScrollY > pos.y + 20) {
            Indicator.open('正在加载数据...');
            this.$store.dispatch('reqRecommend', {page: this.page, count: this.count, callback: ()=>{
                Indicator.close();
              }});

          }

          //列表滚动结束
          this.listScroll.on('scrollEnd', () => {
            this.listScroll.refresh();
          });
        })
      }
    }
  }
</script>

``
求大佬们帮解决下，谢谢大佬们

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在使用Better Scroll时，如果遇到数据重复提交的问题，可以尝试以下几种方法来解决：

1. 异步处理： 当用户下拉或上拉数据时，可以在异步请求完成后再次更新页面。例如，你可以将请求和更新页面的数据放在同一个函数中。

   async function handleScroll() {
       await fetch('/api/recommend')
           .then(response => response.json())
           .then(data => {
               // 更新推荐项
               this.recommendItems = data.items;
           });
       this.page++;
       this.$nextTick(() => this._initBScroll());
   }
   

2. 避免重复提交： 如果你有多个组件依赖于相同的数据源（例如推荐项），你可以考虑在数据更新后为这些组件设置一个计数器，并在所有组件都更新后再执行一次请求。

3. 缓存： 使用缓存策略减少不必要的数据重新请求。例如，在每次请求之前检查是否已经有足够的数据可用。

4. 优化请求参数： 在每个请求中只提供必要的信息，以减少不必要的数据传输。

5. 监控和日志： 监控请求响应时间并记录异常情况，以便及时发现并解决问题。

6. API设计： 对于动态数据，确保API接口返回的数据结构是可预测的，或者至少支持按需加载，而不是一次性获取全部数据。

7. 性能测试： 测试你的应用在高负载下的表现，确保在大量并发请求的情况下也能保持良好的性能。

8. 服务器端处理： 如果可能的话，将数据从客户端发送到服务器进行处理，然后将结果返回给前端。这样可以避免过多的数据交互。

9. 重试机制： 如果在多次请求后仍然无法获取所需数据，可以考虑添加重试逻辑，但要小心不要过度使用，以免影响用户体验。

请注意，这些建议适用于大多数情况下。根据具体问题和需求，可能需要调整一些细节。希望这些建议对你有所帮助！