BetterScroll只能上拉不能下拉
BetterScroll只能上拉不能下拉
下面源代码
<template>
<div class="two">
<div class="wrapper" ref="wrapper">
<div class="content">
<ul class="applist">
<li v-for="(item,index) in data"
:key="index"
@click="Btn(item.Src)"
>
<div class="logo">
<img :src="item.LogoImg" alt="">
</div>
<div class="text">
<p class="top">{{item.AppName}}</p>
<p class="smalltext">{{item.Use}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import BetterScrolll from 'better-scroll'
import http from '../../assets/api/request'
export default {
components:{
BetterScrolll
},
data(){
return{
data:[],
}
},
methods:{
async getData(){
let res = await http.$axios({
url:'/api/good/id',
})
this.data = res
},
},
mounted(){
this.getData();
this.$nextTick(()=>{
this.scroll = new BetterScrolll(this.$refs.wrapper, {
movable:true,
zoom:true,
click:true,
})
})
}
}
</script>
<style scoped lang='scss'>
.two{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.wrapper{
width: 100vw;
height: 100vh;
overflow: hidden;
.content{
width: 100vw;
}
}
.applist{
width: 100vw;
margin: 0 auto;
position: relative;
li{
width: 335px;
height: 100px;
margin: 0 auto 18px auto;
display: flex;
align-items: center;
justify-content:space-between;
background-color: white;
border: 3px solid black;
.logo{
width: 55px;
height: 55px;
padding: 5px;
img{
width: 100%;
height: 100%;
}
}
.text{
width: 270px;
height: 100px;
display: flex;
flex-direction:column;
align-items: center;
p{
height: 50px;
width: 255px;
margin: 0;
padding: 0;
}
.top{
border-bottom: 2px solid rgb(0, 0, 0);
line-height: 50px;
font-size: 18px;
}
.smalltext{
padding: 3px;
font-size: 12px;
}
}
}
}
</style>
本来是只能往上拉，往下拉一点就回弹
刚刚随便乱点，改了下窗口大小
就上面那个，就神奇般的正常了，大小再改回去也可以正常滑动了，但每次第一次点进去都只能向上滑，改了大小后滑动才变得正常，这咋回事
把组件的实例化放在获取到数据回调里面来处理试一下呢，不要放在外面
要解决BetterScroll只能上拉不能下拉的问题，你可以尝试检查BetterScroll的配置是否正确。确保pullUpLoad.enable和pullDownRefresh.enable都设置为true，以确保BetterScroll可以正确的上拉和下拉。此外，你可以尝试检查BetterScroll的pullDownRefresh.threshold属性是否正确，确保该属性的值大于等于0，以确保BetterScroll可以正确的下拉。
题主，这个问题我来替你解决，若有帮助，还望采纳，点击回答右侧采纳即可。
有咩有可能是你的Better-Scroll的第一个包裹的第一个Div样式里面有一个Float导致了元素的脱流，从而使Better-Scroll内容无法下拉！
如果试试这样，可以去掉Better-Scroll里面所有元素的浮动效果：
.clearfix{
clear: both;
}
根据你提供的代码，我没有看到明显的错误。但是可能有几种原因导致 BetterScroll 只能上拉而不能下拉，包括但不限于以下几种情况：
1、wrapper 和 content 的高度没有正确设置。请确保 wrapper 的高度等于或大于 content 的高度。
2、你在 BetterScroll 的选项中设置了 movable 或 zoom 属性，这可能会导致 BetterScroll 只能上拉而不能下拉。请尝试删除这些选项并重新测试。
3、在初始化 BetterScroll 实例之前，wrapper 可能没有正确地加载，导致 BetterScroll 计算滚动区域时出现问题。你可以尝试将初始化 BetterScroll 实例的代码移到 $nextTick 回调函数中，确保在 wrapper 元素加载完毕后再初始化 BetterScroll。
4、你的数据可能没有正确加载，导致 content 区域高度为零。请确保在初始化 BetterScroll 实例之前已经加载了所有必要的数据。
如果仍然无法解决问题，请尝试使用浏览器的开发者工具查看 BetterScroll 实例的状态，并检查是否存在任何错误或警告消息。
如果您的 BetterScroll 只能上拉不能下拉，可以考虑以下几个原因：
1.配置项问题：您可以检查您的 BetterScroll 配置项是否正确，特别是 pullDownRefresh 和 pullUpLoad 的配置项，确保这两个配置项都已启用。
2.数据问题：如果没有下拉刷新数据，则 BetterScroll 将无法支持下拉刷新。
3.元素高度问题：如果 BetterScroll 包裹元素的高度不足以支持下拉刷新，则 BetterScroll 将不支持下拉刷新。
4.CSS 样式问题：如果 CSS 样式影响了 BetterScroll 的滚动效果，则可能导致 BetterScroll 无法下拉刷新。
如果以上内容都没有解决您的问题，请提供更多细节，例如文字代码(不要图片)和配置，我将会尽力帮助您。
如果 BetterScroll 只能上拉不能下拉，那么可能是您在 BetterScroll 的配置中没有开启下拉刷新的功能。
如果您想在 BetterScroll 中使用下拉刷新功能，请在配置 BetterScroll 的时候将 pullDownRefresh 配置项设置为一个对象，并在该对象中配置相关的回调函数。
以下是一个代码示例：
const bs = new BScroll('.wrapper', {
pullDownRefresh: {
threshold: 50,
stop: 20,
content: '正在刷新...',
onPulling() {
console.log('pulling')
},
onRefresh() {
console.log('refresh')
}
}
})
您需要在 onPulling 回调函数中实现下拉过程中的逻辑，并在 onRefresh 回调函数中实现刷新完成后的逻辑。
需要注意的是，在执行完下拉刷新的逻辑后，您需要调用 BetterScroll 的 finishPullDown 方法来结束下拉刷新的状态。
以下是一个代码示例：
// 模拟下拉刷新操作
setTimeout(() => {
bs.finishPullDown()
}, 2000)