1.scroll-y纵向滚动
1.1在scroll-view中添加一个scroll-y实现纵向移动。
<template>
<scroll-view scroll-y class="scrollView">
<view>scrollr子元素</view>
<view>scrollr子元素</view>
<view>scrollr子元素</view>
<view>scrollr子元素</view>
<view>scrollr子元素</view>
<view>scrollr子元素</view>
<view>scrollr子元素</view>
<view>scrollr子元素</view>
</scroll-view>
</template>
1.1.2 在style添加样式。
<style lang="scss">
.scrollView{
width: 80%;
height: 200px;
border: 1px solid red;
}
</style>
1.1.3 运行图。
1.2 在view 添加一个class="box"。
<template>
<scroll-view scroll-y class="scrollView">
<view class="box">scrollr子元素</view>
<view class="box">scrollr子元素</view>
<view class="box">scrollr子元素</view>
<view class="box">scrollr子元素</view>
<view class="box">scrollr子元素</view>
<view class="box">scrollr子元素</view>
<view class="box">scrollr子元素</view>
<view class="box">scrollr子元素</view>
</scroll-view>
</template>
1.2.2 为box设置高宽和背景颜色。
<style lang="scss">
.scrollView{
width: 80%;
height: 200px;
border: 1px solid red;
.box{
width: 100px;
height: 100px;
background: green;
}
}
</style>
1.2.3 运行效果。
2.scroll-x横向滚动
2.1 直接把scroll-y改成scroll-x是不会实现横向滚动的,因为<view>默认是纵向排列的,要想实现可以在.box中添加一个display: inline-block行级块元素。
<style lang="scss">
.scrollView{
width: 80%;
height: 200px;
border: 1px solid red;
.box{
width: 100px;
height: 100px;
background: green;
display: inline-block;
}
}
</style>
2.2 它还是不会实现,我们发现它在操作到第三个的时候就自动换行了,这时可以在.scrollView中添加white-space: nowrap;在.box添加margin: 5px让它们间隔开来。
2.3 style代码如下。
<style lang="scss">
.scrollView{
width: 80%;
height: 200px;
border: 1px solid red;
white-space: nowrap;
.box{
width: 100px;
height: 100px;
background: green;
display: inline-block;
margin: 5px;
}
}
</style>