better-scroll初始化无法滑动，如何解决？

better-scroll初始化无法滑动，需要修改窗口大小才能正常滑动

项目运行后打开谷歌无法滑动

当我随便修改下窗口大小后，才能正常滑动

具体该怎么改

<template>
    <div class="study">
        <Nav/>
        <div class="list">
            <ly-tab
            v-model="selectedId"
            :items="items"
            :options="options"
        >
        ly-tab>
        <div class="wrapper" ref="wrapper">
    
            <ul class="content">
                    <li v-for="(item,index) in data"
                       :key="index"
                    >
                        <div class="img">
                            <img :src="item.BookImg" alt="">
                        div>
                        <div class="text">div>
                        <div class="author">
                            <h4>{{item.BookName}}h4>
                            <p>{{item.BookAuthor}}p>
                        div>
                    li>
                    
            ul>
        div>
        div>
    div>
template>

<script>
import Nav from '../common/NavBack.vue'
import http from '../../assets/api/request'
import BScroll from 'better-scroll'
export default {
    components:{
        Nav,
        BScroll
    },
    data(){
        return{
          selectedId:0,
          items:[
            {id:1,label:"全部"},
            {id:2,label:"乌托邦"},
            {id:3,label:"心理"},
            {id:4,label:"哲学"},
            {id:5,label:"犯罪"},
            {id:6,label:"科幻"},
            {id:6,label:"传记"},
            {id:6,label:"科普"},
          ],
          options: {
                activeColor: '#1d98bd'
                // 可在这里指定labelKey为你数据里文字对应的字段
            },
            data:[]
        }
},
    methods:{
        async getData(){
        let res = await http.$axios({
          url:'/api/booklist_all',
        })
        this.data = res
        console.log(this.data)
      },
    },
     mounted(){
    this.getData();
      this.$nextTick(()=>{
                this.scroll = new BScroll(this.$refs.wrapper, {
                    click:true,               
                })
            })
            
   }
}
script>
<style scoped lang='scss'>
.wrapper{
    width: 100vw;
    height: 85vh;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
}
.study{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .list{
    width: 100vw;
    height: 8vh;
    margin: 8vh 0 0 0;
}
}
.content{
    width: 100vw;
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    li{
        width: 95vw;
        height: 30vh;
        padding: 10px;
        display: flex;
        flex-wrap:wrap;
        .img{
            background-color: coral;
            flex-grow:1;
            border-radius: 15px;
            height: 20vh;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .text{
            height: 20vh;
            flex-grow:2;
            background-color: deepskyblue;
            margin-left: 15px;
            border-radius: 15px;
        }
        .author{
            width:100%;
            height: 9vh;
            padding-left: 5px;
            h4{
                font-size: 25px;
                font-weight:normal;
            }
            p{
                margin: 0;
                padding: 0;  
            }
        }
    }
}

style>

参考gpt和自己的思路，根据您提供的代码，发现您在组件mounted钩子函数中初始化了better-scroll，但是您的.wrapper容器的高度设置为85vh，而且您的整个组件也设置了height: 100vh，可能导致better-scroll无法正常滚动。

建议您按照以下步骤进行修改：

检查组件的样式设置，确认高度设置是否合适。如果高度设置过小，可能导致better-scroll无法正常滚动。
在better-scroll的初始化中，需要传入一些参数来指定容器的宽度和高度等信息，例如：


this.scroll = new BScroll(this.$refs.wrapper, {
    scrollY: true,
    scrollX: false,
    click: true,
    probeType: 3
})

其中，scrollY和scrollX分别指定是否开启纵向和横向滚动，click指定是否开启点击事件，probeType指定better-scroll在滚动过程中派发scroll事件的频率。

在组件的updated钩子函数中，如果better-scroll已经初始化，需要调用其refresh方法来更新容器的宽度和高度等信息，例如：


updated() {
    if (this.scroll) {
        this.scroll.refresh();
    }
}

如果上述方法无法解决问题，可以尝试使用better-scroll提供的debug模式，输出更详细的调试信息，例如：


this.scroll = new BScroll(this.$refs.wrapper, {
    debug: true,
    ...
})

希望能帮到你，请采纳！

该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据代码，你使用了better-scroll插件来实现滑动效果。但是，你在初始化better-scroll时，没有指定滑动的方向（横向还是纵向），也没有指定滑动的内容区域（wrapper）的尺寸和内容的尺寸，这可能导致better-scroll无法正确计算和处理滑动效果。因此，你需要根据你的实际情况来指定better-scroll的选项参数。以下是可能需要修改的地方：

1.指定滑动方向：在new BScroll()时可以通过direction属性来指定滑动方向，如下所示：

this.scroll = new BScroll(this.$refs.wrapper, {
  direction: 'vertical', // 纵向滑动
  click: true
})

2.指定wrapper的尺寸：你的wrapper样式指定了高度为85vh，但是并没有指定宽度。因此，你需要在初始化better-scroll时指定wrapper的宽度和高度，如下所示：

this.scroll = new BScroll(this.$refs.wrapper, {
  direction: 'vertical',
  click: true,
  // 指定wrapper的宽度和高度
  probeType: 3,
  scrollY: true,
  scrollX: false,
  scrollbar: {
    fade: true
  }
})

在这个例子中，probeType: 3表示在滑动时实时派发scroll事件，可以用于实时获取滑动位置。scrollY: true和scrollX: false表示垂直方向滑动，水平方向不滑动。scrollbar: { fade: true }表示滚动条渐隐渐现。

3.指定内容的尺寸：你的内容区域是使用flex布局的，需要在样式中指定内容区域的高度和宽度，如下所示：

.content{
  width: 95vw; /* 修改为95vw */
  height: auto; /* 修改为auto */
  ...
}

这样就可以让内容区域自适应高度，以适应内容的高度。

注意：如果仍然无法滑动，你可以在浏览器控制台中查看是否有相关的错误信息，以确定问题的原因。

该回答引用ChatGPT

根据你提供的代码和截图，可以尝试在Better-Scroll的初始化中添加一些选项来尝试解决这个问题。具体来说，你可以尝试添加probeType选项，将其设置为 3，并将 click选项设置为 true，以便在移动设备上处理点击事件。这些选项应该可以解决你的问题，如下所示：


this.scroll = new BScroll(this.$refs.wrapper, {
  click: true,
  probeType: 3,
})

在实际操作中，你可以尝试在 mounted() 钩子函数中添加这些选项，如下所示：


mounted() {
  this.getData();
  this.$nextTick(() => {
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true,
      probeType: 3,
    })
  })
}

这样，你应该就能正常滑动页面了，而不需要手动改变窗口大小。

初始化 better-scroll 的时候，要计算容器大小。
可以试一下：

在 mounted 钩子函数中，确保获取数据完成后再初始化 better-scroll。
将容器 wrapper 的高度设置为固定值，如 500px，并确保其直接父元素 .study 的高度为 100vh。
如果上述方法都没有生效，可以尝试在 mounted 钩子函数中手动触发一次 better-scroll 的 refresh() 方法，以重新计算容器大小，代码如下：

mounted() {
  this.getData();
  this.$nextTick(() => {
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true,
    });
    this.scroll.refresh();
  });
}

初始化的时候加上这几个属性试试看

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

文章：关于使用better-scroll滑动无法滚动的技术总结中也许有你想要的答案，请看下吧