微信小程序开发之实现个滚动的效果的两种方法

01 overflow： scroll

代码示例：

<!--pages/test/test.wxml-->
<!-- 组件 -->
<view class='flex-test'>
  <view class='a'>a</view>
  <view class='b'>b</view>
  <view class='c'>c</view>
</view>

/* pages/test/test.wxss */
.flex-test{
  width: 400rpx;
  height: 400rpx;
  border: 1px solid red;
  overflow: scroll;
}
.flex-test view{
  width: 200rpx;
  height: 200rpx;
  font-size: 40rpx;
  color: white;
  text-align: center;
  line-height: 200rpx;
}
.a{
  background-color: green;
}
.b{
  background-color: red;
}
.c{
  background-color: blue;
}

运行结果：

心得：
在wxss文件中通过overflow：scroll来实现滚动效果，如上例实现了竖向滚动的效果。

02 scroll-view

代码示例：

<!--pages/test/test.wxml-->
<!-- 组件 -->
<scroll-view class='flex-test' scroll-x="true" scroll-y="true">
  <view class='a'>a</view>
  <view class='b'>b</view>
  <view class='c'>c</view>
</scroll-view>

/* pages/test/test.wxss */
.flex-test{
  width: 400rpx;
  height: 400rpx;
  border: 1px solid red;
}
.flex-test view{
  width: 600rpx;
  height: 200rpx;
  font-size: 40rpx;
  color: white;
  text-align: center;
  line-height: 200rpx;
}
.a{
  background-color: green;
}
.b{
  background-color: red;
}
.c{
  background-color: blue;
}

运行结果：

心得：
通过这种方法实现滚动效果，需要设置两个属性，scroll-x和scroll-y，这两个属性分别是控制横向滚动和竖向滚动，值为true或者false。

-END-