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

前端之家收集整理的这篇文章主要介绍了微信小程序 视图容器组件的详解及实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

小程序给出的视图容器组件有三个、和:

1、 视图容器

相当于html中的

标签,有四个属性

这里写图片描述

效果有关:hover设置是否启用点击效果,而hover-class设置点击的效果

效果的时间有关:效果出现的延迟时间,hover-stay-time设置点击效果持续的时间,单位都是毫秒。

创建一个项目测试一下:

index.wxml

index.wxss

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、 可滚动视图区域

有两类:横向滚动和纵向滚动。有以下属性

这里写图片描述

同样,我们创建一个项目来了解以上属性的使用。

index.wxml

index.wxss

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

页面效果如下:

这里写图片描述

scroll-y和scroll-x"

首先我们设置了的scroll-y="true",也就是纵向滚动,在index.wxss中设置了其高度为200px,里面的每一个子的高度为100px,正好可以完全容纳两个完整的子。如果设置scroll-x="true"则为横向滚动。

scroll-top和scroll-left

scroll-top为竖向滚动条位置,默认为0;同理scroll-left为横向滚动条位置。上述程序中设置了scroll-top="{{scrollTop}}",scrollTop从数据中获取

为了更好的展示,给一个新的绑定一个函数

函数递增改变scrollTop的值:

所以每点击一次,scrollTop就增加20,因此向下滚动20px。

这里写图片描述

scroll-into-view

scroll-into-view的值为某个子元素的id,表明滚动到该元素,元素顶部对齐滚动区域顶部。上述程序中设置了scroll-into-view="{{toView}}",toView从数据中获取

新建一个并绑定一个函数

1

函数功能为按顺序滚动到对应的子元素:

其中order为一个数组变量,存放着所有子元素的id:

bindscrolltolower和bindscrolltoupper

bindscrolltolower和bindscrolltoupper为事件绑定:bindscrolltolower是滚动到底部/右边时触发;bindscrolltoupper是滚动到顶部/左边时触发。另外还有一个bindscroll是只要滚动时就会触发。

以bindscrolltolower为例,bindscrolltolower表示滚动到底部或右边时触发,这个底部或右边是如何定义的呢?这时就需要用到lower-threshold,lower-threshold表示距底部/右边多远时(单位px),触发 scrolltolower 事件,默认值为50,上述代码中我们定义了lower-threshold="100",由于子的高度就是100px,所以正好出现最后一个子时就会触发事件:

这里写图片描述

3、 滑块视图容器

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

这里写图片描述

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

swiper.wxml

swiper.wxss

swiper.js

})

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

这里写图片描述

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

猜你在找的微信小程序相关文章