微信小程序常用视图容器组件如何使用

属性如下表所示

2.1.1 案例

本例设计了两组父子view容器的点击态，第一组父子view容器种子view容器不阻止点击态向父容器传递，第二组父子view容器中子view容器阻止点击态向父容器传递，

pages/view/view.wxml代码如下：

1.view小案例
(1)不阻止父容器的view-hover
我是父类容器
我是子类容器

(2)阻止父容器的view-hover
我是父类容器
我是子类容器

pages/view/view.wxss代码如下：

.view-parent{
width:100%;
height:350rpx;
background-color:pink;
text-align:center;
}
.view-son{
width:50%;
height:200rpx;
background-color:skyblue;
margin:20rpxauto;
text-align:center;
}
.view-hover{
background-color:red;
}

app.wxss

.demo-box{
padding:20rpx;
margin:20rpx60rpx;
border:1rpxsolidgray;
}
.title{
display:flex;
flex-direction:row;
margin:20rpx;
justify-content:center;
}

页面初始效果

点击第1组子容器

点击第2组子容器

在view.wxml种放置两组容器，在app.wxss文件中设置父容器背景色为浅红色，子容器背景色为浅蓝色，通过hover-class=”view-hover”为标签增加属性，点击态均设置为点击后背景色更新为红色，第一组不阻止点击态传递给父容器，在第二组子类容器种通过hover-stop-propagation来组织点击态传递给父容器，并设置属性hover-start-time=“3000”，hover-stay-time=“4000”,当点击子容器时，3s后出现点击状态，当手指松开4ss后，子容器背景色编为初始颜色。

2.2 scroll-view

scroll-view容器为可滚动的视图容器，允许用户通过手指在容器上滑动来改变显示区域，常见的滑动方向有水平滑动和垂直滑动。其属性表如下所示。

注意：在使用纵向滚动时，需要为设置一个固定宽度

2.2.1 案例

pages/scroll-view/scroll-view.wxml

2.scroll-view小案例
实现纵向滚动

元素一
元素二
元素三
元素四
元素五
元素六

pages/scroll-view/scroll-view.wxss

scroll-view{
height:600rpx;
width:250rpx;
margin:0auto;
}
.scroll-item-y{
height:200rpx;
line-height:200rpx;
text-align:center;
background-color:skyblue;
border:1pxsolidgray;
}

本例在scroll-view.wxml文件中设置组件，通过设置属性scroll-y,允许组件上下滑动，在scroll-view.wxss文件中设置其高度为600rpx，使得scroll-view组件能够纵向滑动，在中嵌套6组用于显示滚动效果，内部元素宽度均为250rpx。

滑动前：

滑动后：

2.3 swiper

组件为滑块视图容器，通常用于图片之间的切换播放，被形象得称为轮播图。其属性表如图所示。

2.3.1 案例

效果图：

pages/swiper/swiper.wxml

3.swiper小案例
图片进行翻页切换

pages/swiper/swiper.wxss

swiper{
height:350rpx;
}

本例在swiper.wxml文件中放置组件,组件属性autoplay允许自动切换图片，设置属性interval=“3000”,图片每隔3s发生一次切换，属性indicator-dots用于显示面板知识点，组件中嵌套3组,swiper容器高度设置为300rpx。

感谢各位的阅读，以上就是“微信小程序常用视图容器组件如何使用”的内容了，经过本文的学习后，相信大家对微信小程序常用视图容器组件如何使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！