const. 2019-03-12 10:35 采纳率: 50%
浏览 910

新手求助,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>

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

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 fluent的在模拟压强时使用希望得到一些建议
    • ¥15 STM32驱动继电器
    • ¥15 Windows server update services
    • ¥15 关于#c语言#的问题:我现在在做一个墨水屏设计,2.9英寸的小屏怎么换4.2英寸大屏
    • ¥15 模糊pid与pid仿真结果几乎一样
    • ¥15 java的GUI的运用
    • ¥15 Web.config连不上数据库
    • ¥15 我想付费需要AKM公司DSP开发资料及相关开发。
    • ¥15 怎么配置广告联盟瀑布流
    • ¥15 Rstudio 保存代码闪退