小程序实现滚动

小程序的滚动是开发中常用的一个组件。它分为横向滚动和纵向滚动。
试图容器中的 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属性即可实现横向滚动。

提示：如果都设置好了，确定没有问题但是还是不能横向滚动的话，请试试在两个元素中间位置进行左右拖动。因为小弟我就是设置好了但是不能左右滚动，测试是发现的，可能只是我的问题或者鼠标问题。仅供参考。