小程序给出的视图容器组件有三个:</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 class="container">
<view class="flex-item bc_green" hover="true" hover-class="green_hover">1</view>
<view class="flex-item bc_red" hover="true" hover-class="red_hover" hover-start-time="400" hover-stay-time="1000">2</view>
<view class="flex-item bc_blue">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;
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
效果如下:
设置了第一个和第二个子view的点击效果,这两个点击效果的时间有所不同,第二个的点击之后延迟出现的时间更长,而且持续的时间也更长。第三个没有另外的点击效果,因此是使用的默认值,默认是没有点击效果的。
2、</scroll-view>
可滚动视图区域
</scroll-view>
有两类:横向滚动和纵向滚动。</scroll-view>
有以下属性:
同样,我们创建一个项目来了解以上属性的使用。
index.wxml
<view class="container">
<scroll-view class="srcoll_view" scroll-y="true" lower-threshold="100" bindscrolltolower="lower" scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}">
<view id="green" class="flex-item bc_green">1</view>
<view id="red" class="flex-item bc_red">2</view>
<view id="blue" class="flex-item bc_blue">3</view>
<view id="yellow" class="flex-item bc_yellow">4</view>
</scroll-view>
<view class="clickItem" bindtap="clickAdd">点击向下滚动</view>
<view class="clickItem" bindtap="clickTo">点击滚动到下一个子view</view>
</view>
index.wxss
.srcoll_view{