使用Hbuiderx创建项目,然后新建页面,下面贴出代码。
水平滚动
<template>
<view>
<view>水平滚动</view>
<scroll-view class="scorll" :scroll-x="true" :scroll-with-animation="true">
<view class="item one">001</view>
<view class="item two">002</view>
<view class="item three">003</view>
<view class="item four">004</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.scorll{
height: 200rpx;
//需要设置父元素不换行
white-space: nowrap;
.item {
width: 100%;
height: 200rpx;
//需要设置子元素为行元素
display: inline-block;
}
.one{
background-color: red;
}
.two
{
background-color: yellow;
}
.three{
background-color: green;
}
.four{
background-color: blue;
}
}
</style>
垂直滚动
<template>
<view>
<view>垂直滚动</view>
<scroll-view class="scorll" :scroll-y="true" :scroll-with-animation="true">
<view class="item one">001</view>
<view class="item two">002</view>
<view class="item three">003</view>
<view class="item four">004</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.scorll{
//垂直滚动,需要设置父级高度
height: 400rpx;
.item {
width: 100%;
height: 400rpx;
}
.one{
background-color: red;
}
.two
{
background-color: yellow;
}
.three{
background-color: green;
}
.four{
background-color: blue;
}
}
</style>