小程序的滚动是开发中常用的一个组件。它分为横向滚动和纵向滚动。
试图容器中的 scroll-view组件 是可滚动视图区域。
其中属性 scroll-y 是纵向滚动使用属性, scroll-x 是横向滚动使用属性。
以下是使用示例:
纵向滚动(scroll-y):
下面是.wxml代码,设置可滚动区域和滚动区域内的元素:
<view>
<text>纵向滚动</text>
<scroll-view scroll-y style='height:200px;'> //加入属性scroll-y,必须设置height
<view id="green" class="scroll-view-item bc-green"></view>
<view id="red" class="scroll-view-item bc-red"></view>
<view id="yellow" class="scroll-view-item bc-yellow"></view>
<view id='blue' class='scroll-view-item bc-blue'></view>
</scroll-view>
</view>
下面是.wxss代码,主要是设置滚动元素的宽高和各个元素的颜色以作区分:
.scroll-view-item{
height: 80px;
width:300px;
}
.bc-green{
background: green
}
.bc-red{
background: red
}
.bc-yellow{
background: yellow
}
.bc-blue{
background: blue
}
纵向滚动比较简单,只要加入scroll-y和高度height就可以实现。
横向滚动
下面是横向滚动的.wxml代码,使用scroll-x横向滚动属性,定义好可滚动区域:
<view>
<text>横向滚动</text>
<scroll-view scroll-x class="scroll-view-item"> //使用scroll-x属性
<view id="green" class="scroll-view-item-H bc-green"></view>
<view id="red" class="scroll-view-item-H bc-red"></view>
<view id="yellow" class="scroll-view-item-H bc-yellow"></view>
<view id="blue" class="scroll-view-item-H bc-blue"></view>
</scroll-view>
</view>
下面是.wxss代码,主要就是设置可移动区域框 和 区域框内的元素属性值:
.scroll-header{
display: block;
width: 300px;
white-space: nowrap;
}
.scroll-view-item-H{
height: 100px;
width:200px;
border:1px solid red;
display: inline-block;
}
.bc-green{
background: green
}
.bc-red{
background: red
}
.bc-yellow{
background: yellow
}
.bc-blue{
background: blue
}
横向滚动主要wxss设置为:可滚动框的两个属性:display: block; white-space: nowrap; 前一个是设置显示为块状,后一个是规定段落中文本不换行。
滚动框内元素属性设置:display: inline-block 这是设置让里面的子元素排在一行上。再加上scroll-x属性即可实现横向滚动。
提示:如果都设置好了,确定没有问题但是还是不能横向滚动的话,请试试在两个元素中间位置进行左右拖动。因为小弟我就是设置好了但是不能左右滚动,测试是发现的,可能只是我的问题或者鼠标问题。仅供参考。