微信小程序视图容器组件的详解及实例代码

　　大家知道微信小程序视图容器吗?这个小程序视图容器也包含了很多类别，今天小编就为大家分享一下微信小程序视图容器,下文章详细介绍了微信小程序视图容器组件的详解及相关小程序代码,有需要的朋友可以参考一下!

　　微信小程序 视图容器组件详解：

　　小程序给出的视图容器组件有三个：view、scroll-view和swiper：

　　1、 wiew视图容器

　　hover和hover-class与点击效果有关：hover设置是否启用点击效果，而hover-class设置点击的效果。

　　hover-start-time和hover-stay-time与点击效果的时间有关：hover-start-time设置点击之后点击效果出现的延迟时间，hover-stay-time设置点击效果持续的时间，单位都是毫秒。

　　创建一个项目测试一下：

　　index.wxml

　　index.wxss

　　效果如下：

　　设置了第一个和第二个子view的点击效果，这两个点击效果的时间有所不同，第二个的点击之后延迟出现的时间更长，而且持续的时间也更长。第三个没有另外的点击效果，因此是使用的默认值，默认是没有点击效果的。

　　2、scroll-view可滚动视图

　　使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

    示例代码

　3、swiper滑块视图容器

　　其实就是微信小程序封装的幻灯片轮播功能，并给出了几个可供开发者设置的属*：

　　用户可以根据自己需求设置相应的属*值即可，示例代码如下：

　　swiper.wxml

　　swiper.wxss

　　swiper.js

　　由于绑定了change函数，所以每次切换时，都会触发change事件：

    感谢阅读微信小程序视图容器组件的详解及实例代码，希望上述内容能够能帮助到大家，同时放到实际学习和工作当中，想要了解更多微信程序视图容器方面的资料，欢迎来到微小乔，这里每天都有更新哟!再次谢谢大家对本站的支持!

　　更多

　　微信小程序模版怎么应用及简单实例

　　微信小程序示例：滚动动画、点击事件及评分星星详解

　　微信小程序读取本地json数据示例