Better-scroll插件初始化之后不能滚动，刷新之后又可以滚动问题解决

Better-scroll插件初始化之后不能滚动，刷新之后又可以滚动问题解决

今天移动端突然发现个问题，项目初始化后页面无法滚动，真机上好像没这问题啊，百度可知，是better-scroll的原因，看网上还真有不少人遇到，经过一顿操作后，加了属性，应该可以了，如果大家有遇到，可以尝试如下方法；

封装如下

<template>
  <div class="wrapper" ref="wrapper">
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "Scroll",
  props: {
    probeType: {
      type: Number,
      default: 1,
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    pullUpLoad: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      scroll: {},
    };
  },
  mounted() {
    setTimeout(this.__initScroll, 20);
    // console.log(this.scroll);
  },
  methods: {
    __initScroll() {
      // 1.初始化BScroll对象
      if (!this.$refs.wrapper) return;
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: true, // 鼠标点击滚动
        // tap: true,
        // mouseWheel: true, //鼠标滚轮滚动
        disableMouse: false,// 启用鼠标拖动
        disableTouch: false,// 启用手指触摸
        pullUpLoad: this.pullUpLoad,
      });

      // 2.将监听事件回调
      this.scroll.on("scroll", (pos) => {
        this.$emit("scroll", pos);
      });

      // 3.监听上拉到底部
      this.scroll.on("pullingUp", () => {
        // console.log("上拉加载");
        this.$emit("pullingUp");
      });
    },
    refresh() {
      this.scroll && this.scroll.refresh && this.scroll.refresh();
    },
    finishPullUp() {
      this.scroll && this.scroll.finishPullUp && this.scroll.finishPullUp();
    },
    scrollTo(x, y, time = 500) {
      this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time);
    },
  },
  watch: {
    data() {
      // console.log(this.data);
      setTimeout(this.refresh, 20);
    },
  },
};
</script>

<style scoped>
</style>

主要是new BScroll 配置中的属性

mouseWheel: true, //鼠标滚轮滚动
disableMouse: false,// 启用鼠标拖动
disableTouch: false,// 启用手指触摸

使用如下

<template>
  <div class="home">
    <baseTitleBar
      backgroundColor="#FFF"
      :title="title"
      titleColor="#000"
    ></baseTitleBar>

    <scroll
      class="content"
      ref="scroll"
      @pullingUp="loadMore"
      @scroll="contentScroll"
      :data="data"
      :pull-up-load="enableLoadMore"
      :probe-type="3"
    >
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, idx) in swipeList" :key="idx">
          <img :src="item.target" alt="" class="swiper-img" />
        </van-swipe-item>
      </van-swipe>
      <!-- 列表 -->
      <Item v-for="(item, idx) in data" :key="idx" :item="item" />
    </scroll>
    <BackTop @click.native="gobackTop" v-show="showBackTop"></BackTop>
  </div>
</template>

<script>
import baseTitleBar from "@/components/titleBar/baseTitleBar";
import scroll from "../components/scroll";
import BackTop from "../components/backTop.vue";
import Item from "../components/item.vue";
import { homeSwipeList, homeGoodsList } from "@/api/home";

export default {
  name: "home",
  components: { scroll, baseTitleBar, BackTop, Item },
  data() {
    return {
      page: 1,
      limit: 10,
      data: [],
      swipeList: [],
      leftEle: {
        iconName: "iconback",
        color: "#000",
        fontSize: ".36rem",
        method: this.back,
      },
      title: "首页",
      showBackTop: false,
      backTopDistance: 800,
      enableLoadMore: true,
    };
  },
  methods: {
    back(){
      console.log('back');
    },
    // 请求轮播数据
    async gethomeSwipeList() {
      try {
        let res = await homeSwipeList();
        if(res.code == 200){
          this.swipeList = res.item;
        }else{
          console.log('接口有问题！');
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 请求列表数据
    getListData() {
      let params = {
        // 页数
        page: this.page,
        limit: this.limit,
      };
      this.$loading.show();
      homeGoodsList(params).then((res) => {
        this.$loading.hide();
        if (res.code == 200) {
          if (this.data.length >= res.item.total) {
            this.enableLoadMore = false;
            return;
          }
          // this.data = this.data.concat(res.item.resultList);
          const homeGoodsList = res.item.resultList;
          this.data.push(...homeGoodsList);
          this.page += 1;
          this.$refs.scroll.finishPullUp();
        } else {
          console.log("接口出错");
        }
      });
    },
    // 加载更多
    loadMore() {
      this.getListData();
      // 用于图片异步加载高度问题刷新
      this.$refs.scroll.refresh();
    },
    // 监听回顶的显示
    contentScroll(position) {
      // 1.决定tabFixed是否显示
      // this.isTabFixed = position.y < -this.tabOffsetTop;
      // 2.决定backTop是否显示
      this.showBackTop = -position.y > this.backTopDistance;
    },
    // 回到顶部
    backTop() {
      this.$refs.scroll.scrollTo(0, 0, 300);
    },
    // 回到顶部
    gobackTop() {
      // console.log("回到顶部", this.$refs.scroll);
      // 第一种写法 this.$refs.scroll 拿到scroll组件里面的scroll , 然后调用里面的方法 , 第一二参数为距离, 第三个参数为时间500ms
      // this.$refs.scroll.scroll.scrollTo(0, 0, 500);
      // 第二种写法
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    imageLoad() {
      console.log("图片加载完触发事件");
      // this.$bus.$emit('itemImageLoad')
    },
  },
  created() {
    this.gethomeSwipeList();
    this.getListData();
    // 监听item中图片加载完
    // this.$bus.$on('itemImageLoad', () => {
    //   console.log(111);
    // })
  },
};
</script>

<style scoped lang="scss">
.home {
  // height: 100vh;
  height: 100%;
  position: relative;
}
.content {
  position: absolute;
  top: 0.9rem;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
// 轮播图
.my-swipe {
  width: 100%;
  height: 4.5rem;
}
.swiper-img {
  width: 100%;
  height: 4.5rem;
}
</style>

页面如下：

项目中自行尝试