问题:无限滚动列表在搜索后请求回来的数据会自动滚动到上次滚动条停留的位置
解决方法:在加到父节点或者自身上加overflow,否则会报错。
<el-radio-group v-infinite-scroll="loadHandler" style="overflow:auto;height:100%" >
<div v-for="(product, productIndex) in shownProducts" :key="productIndex">
<el-radio :label="product.code">{{ product.name }}</el-radio>
</div>
</el-radio-group>
methods:{
loadHandler(){
console.log('无限请求的方法')
}
}
使用无限滚动需要注意的问题:
1、overflow属性是一定要有的,可以加到父节点或者自身上,否则会报错。
2、容器一定要被撑开并触底,这样才会触发v-infinite-scroll上绑定的方法。
3、设置height: calc(100vh - 72px);(72是除内容区的高度)样式可以将顶部固定,这样就只有内容区可以滚动。
4、使用concat方法合并旧有内容和新加载出来的内容。