微信小程序组件1--视图容器

最新推荐文章于 2024-10-09 09:35:08 发布

诗渊

最新推荐文章于 2024-10-09 09:35:08 发布

阅读量1w

点赞数 1

分类专栏：微信小程序文章标签：微信小程序视图容器 view

本文链接：https://blog.csdn.net/u014607184/article/details/54342844

版权

本文详细介绍了微信小程序中的三种视图容器组件：View、ScrollView和Swiper。通过实例展示了各组件的属性使用，包括点击效果、滚动行为以及滑块轮播功能，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

小程序给出的视图容器组件有三个：</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;
}