qq_37310626
const.
采纳率50%
2019-03-12 10:35 阅读 863

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



    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>

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

相关推荐