scroll-view（可滚动视图）
以上表格中是我们开发时最常用的几个属性
·scroll-x （默认值：false） 解释：允许横向滚动
·scroll-y（默认值：false） 解释：允许纵向滚动
·scroll-top 解释：设置竖向滚动条位置（因为横向的滚动条只能设置上下位置）
·scroll-left 解释：设置横向滚动条位置（因为纵向的滚动条只能设置左右位置）
下面我把开发中用到的两种滚动条的进行分别展示：
1.横向(注意设置横向的时应在scroll-view{}中写入 white-space: nowrap;并且在每一个子组件的样式中写入：display: inline-block;)
wxml：
<scroll-viewscroll-x="true"><viewclass="lqj1">元素1</view><viewclass="lqj2">元素2</view><viewclass="lqj3">元素3</view><viewclass="lqj4">元素4</view></scroll-view>
wxss:
scroll-view{ height: 100%; width: 100%; background-color: darkorange; white-space: nowrap; } .lqj1{ display: inline-block; background-color: red; width: 500rpx; height: 300rpx; } .lqj2{ display: inline-block; background-color: blue; width: 500rpx; height: 300rpx; } .lqj3{ display: inline-block; background-color: chartreuse; width: 500rpx; height: 300rpx; } .lqj4{ display: inline-block; background-color: darkmagenta; width: 500rpx; height: 300rpx; }
效果展示：
2.纵向
wxml:
<scroll-viewscroll-y="true"><viewclass="lqj1">元素1</view><viewclass="lqj2">元素2</view><viewclass="lqj3">元素3</view><viewclass="lqj4">元素4</view></scroll-view>
wxss:
scroll-view{ height: 600rpx; width: 200rpx; } .lqj1{ display: inline-block; background-color: red; width: 500rpx; height: 300rpx; } .lqj2{ display: inline-block; background-color: blue; width: 500rpx; height: 300rpx; } .lqj3{ display: inline-block; background-color: chartreuse; width: 500rpx; height: 300rpx; } .lqj4{ display: inline-block; background-color: darkmagenta; width: 500rpx; height: 300rpx; }
效果演示：
微信小程序中具体的写方式的方法常见的几种：
1.通过calss写样式
wxml：
<viewclass="lqj1"></view>
wxss：
.lqj1{ display: inline-block; background-color: red; width: 500rpx; height: 300rpx; }
2.通过id写样式
wxml：
<viewid="lqj1"></view>
wxss：
#lqj1{ display: inline-block; background-color: red; width: 500rpx; height: 300rpx; }
3.通过组件名写样式
wxml：
<view></view>
wxss：
view{ display: inline-block; background-color: red; width: 500rpx; height: 300rpx; }
4.通过wxml内部写样式
wxml：
<viewstyle="background-color: red;width: 500rpx;height: 300rpx;"></view>
这里注意：
用的是组件名写样式
wxml中有组件名（例如上面的<scroll-view></scroll-view>）我们可以直接在wxss中写入组件名进行样式的编写，这一种写样式的方法！
举例：
wxml：
<scroll-viewscroll-x="true"></scroll-view>
wxss：
scroll-view{ height: 100%; width: 100%; background-color: darkorange; white-space: nowrap; }
