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>
本来是只能往上拉，往下拉一点就回弹
刚刚随便乱点，改了下窗口大小
就上面那个，就神奇般的正常了，大小再改回去也可以正常滑动了，但每次第一次点进去都只能向上滑，改了大小后滑动才变得正常，这咋回事
