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 matlab实现基于主成分变换的图像融合。
    • ¥15 对于相关问题的求解与代码
    • ¥15 ubuntu子系统密码忘记
    • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
    • ¥15 保护模式-系统加载-段寄存器
    • ¥15 电脑桌面设定一个区域禁止鼠标操作
    • ¥15 求NPF226060磁芯的详细资料
    • ¥15 使用R语言marginaleffects包进行边际效应图绘制
    • ¥20 usb设备兼容性问题
    • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊