vue局部滚动组件
如图实现,页面内容在局部滚动的效果~~(2)代码演示<template><div class="newsletter-simple"><div class="text-mess-title"><div><imgsrc="https://img.dota2.com.c...
·
如果不想使用swiper,则可以使用原生CSS的方式
<template>
<div class="test-scroller">
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
<div>33333333</div>
<div>4444444444</div>
<div>66666666666</div>
<div>65666666666</div>
</div>
</template>
<script>
export default {
name: 'TSP',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="less" scoped>
.test-scroller {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
background: red;
color: #fff;
height: 30rem;
overflow: scroll;
}
</style>
更多推荐
已为社区贡献67条内容
所有评论(0)