微信小程序微信小程序 视图容器组件的详解及实例代码视图容器组件的详解及实例代码
主要介绍了微信小程序 视图容器组件的详解及实例代码的相关资料,这里对基础知识进行了详细介绍并附有简单实例代码,需要的朋友可以参考下
微信小程序微信小程序 视图容器组件详解:视图容器组件详解:
小程序给出的视图容器组件有三个:</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;
}
效果如下:
设置了第一个和第二个子view的点击效果,这两个点击效果的时间有所不同,第二个的点击之后延迟出现的时间更长,而且持续的时间也更长。第三个没有另外的点击效果,因此是使用的默认值,默认
是没有点击效果的。