微信小程序 视图容器组件详解：
小程序给出的视图容器组件有三个：</view>、</scroll-view>和</swiper>：
1、</view> 视图容器
</view>相当于html中的</div>标签，有四个属性：
hover和hover-class与点击效果有关：hover设置是否启用点击效果，而hover-class设置点击的效果。
hover-start-time和hover-stay-time与点击效果的时间有关：hover-start-time设置点击之后点击效果出现的延迟时间，hover-stay-time设置点击效果持续的时间，单位都是毫秒。
创建一个项目测试一下：
index.wxml
<view> <view hover="true" hover-class="green_hover">1</view> <view hover="true" hover-class="red_hover" hover-start-time="400" hover-stay-time="1000">2</view> <view>3</view> </view>
index.wxss
.flex-item{ width: 100%; height: 100px; box-sizing: border-box; } .bc_green{ background-color: green; } .bc_red{ background-color: red; } .bc_blue{ background-color: blue; } .green_hover{ border: 5px solid black; } .red_hover{ border: 5px solid black; }
效果如下：
设置了第一个和第二个子view的点击效果，这两个点击效果的时间有所不同，第二个的点击之后延迟出现的时间更长，而且持续的时间也更长。第三个没有另外的点击效果，因此是使用的默认值，默认是没有点击效果的。
2、</scroll-view> 可滚动视图区域
</scroll-view>有两类：横向滚动和纵向滚动。</scroll-view>有以下属性：
同样，我们创建一个项目来了解以上属性的使用。
index.wxml
<view> <scroll-view scroll-y="true" lower-threshold="100" bindscrolltolower="lower" scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}"> <view>1</view> <view>2</view> <view>3</view> <view>4</view> </scroll-view> <view bindtap="clickAdd">点击向下滚动</view> <view bindtap="clickTo">点击滚动到下一个子view</view> </view>
index.wxss
.srcoll_view{ height: 200px; } .flex-item{ width: 100%; height: 100px; box-sizing: border-box; } .bc_green{ background-color: green; } .bc_red{ background-color: red; } .bc_blue{ background-color: blue; } .bc_yellow{ background-color: yellow; } .clickItem{ margin-top: 20px; background-color: grey; height: 20px; border-radius: 5px; }
index.js
var app = getApp(); var order = ['green','red', 'blue','yellow','green']; Page({ data: { scrollTop: 0, toView:"green" }, onLoad: function () { }, lower: function(e) { console.log(e) }, clickAdd:function(){ this.setData({ scrollTop: this.data.scrollTop+20 }); console.log("this.data.scrollTop:" + this.data.scrollTop); }, clickTo: function(e) { for (var i = 0; i < order.length; i++) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } }, })
页面效果如下：
scroll-y和scroll-x"
首先我们设置了</scroll-view>的scroll-y="true"，也就是纵向滚动，在index.wxss中设置了其高度为200px，里面的每一个子</view>的高度为100px，正好可以完全容纳两个完整的子</view>。如果设置scroll-x="true"则为横向滚动。
scroll-top和scroll-left
scroll-top为竖向滚动条位置，默认为0；同理scroll-left为横向滚动条位置。上述程序中设置了scroll-top="{{scrollTop}}"，scrollTop从数据中获取。
为了更好的展示，给一个新的</view>绑定一个函数：
<view bindtap="clickAdd">点击向下滚动</view>
函数递增改变scrollTop的值：
clickAdd:function(){ this.setData({ scrollTop: this.data.scrollTop+20 }); console.log("this.data.scrollTop:" + this.data.scrollTop); },
所以每点击一次，scrollTop就增加20，因此向下滚动20px。
scroll-into-view