微信小程序常用视图容器组件使用详解

更新时间：2022年03月16日 11:32:10 作者：别团等shy哥发育

组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。本文将通过示例详细为大家介绍一下微信小程序中常用的视图容器组件，需要的可以参考一下

1、组件概述

组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序之后，界面中的图片、文字等元素都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。

其语法格式如下：

<标签名称属性="值">
内容
</标签名称>

2、常用的试图容器组件

视图容器(View Container)组件用于排版页面为其他组件提供载体。常用视图容器有View、scroll-view和swiper等等。

2.1 view

view容器是页面中最基本的容器组件，通过高度和宽度来定义容器大小。<view>相当于HTML种的<div>标签，是一个页面中最外层的容器，能够接受其他组件的嵌入，例如，多个view容器的嵌套。view容器可以通过flex布局定义内部项目的排列方式。

属性如下表所示

2.1.1 案例

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

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

<view class="demo-box">
  <view class="title">1.view小案例</view>
  <view class="title">(1)不阻止父容器的view-hover</view>
  <view class="view-parent" hover-class="view-hover">我是父类容器
    <view class="view-son" hover-class="view-hover">我是子类容器</view>
  </view>
  <view class="title">(2)阻止父容器的view-hover</view>
  <view class="view-parent" hover-class="view-hover">我是父类容器
    <view class="view-son" hover-class="view-hover" hover-stop-propagation hover-start-time="3000" hover-stay-time="4000">我是子类容器</view>
  </view>
</view>

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: 20rpx auto;
  text-align: center;
}
.view-hover {
  background-color: red;
}

app.wxss

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

页面初始效果

点击第1组子容器

点击第2组子容器

在view.wxml种放置两组<view>容器，在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

<view class="demo-box">
    <view class="title">2.scroll-view小案例</view>
    <view class="title">实现纵向滚动</view>
    <scroll-view scroll-y>
      <view class="scroll-item-y">元素一</view>
      <view class="scroll-item-y">元素二</view>
      <view class="scroll-item-y">元素三</view>
      <view class="scroll-item-y">元素四</view>
      <view class="scroll-item-y">元素五</view>
      <view class="scroll-item-y">元素六</view>
    </scroll-view>
</view>

pages/scroll-view/scroll-view.wxss

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

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

滑动前：

滑动后：

2.3 swiper

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

2.3.1 案例

效果图：

pages/swiper/swiper.wxml

<view class="demo-box">
  <view class="title">3.swiper小案例</view>
  <view class="title">图片进行翻页切换</view>
  <swiper indicator-dots autoplay interval="3000">
    <swiper-item>
      <image src="/images/cat1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/cat2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/cat3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

pages/swiper/swiper.wxss

swiper {
  height: 350rpx;
}

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

以上就是微信小程序常用视图容器组件使用详解的详细内容，更多关于小程序视图容器组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Web打印解决方案之普通报表打印功能
这篇文章主要介绍了Web打印解决方案之普通报表打印功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
javascript判断图片是否加载完成的方法推荐
下面小编就为大家带来一篇javascript判断图片是否加载完成的方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。
2016-05-05
js实现移动端导航点击自动滑动效果
这篇文章主要为大家详细介绍了js实现移动端导航点击自动滑动效果，导航可左右滑动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JavaScript实现二叉树层序遍历
这篇文章主要为大家简单介绍一下JS中如何实现二叉树层序遍历，感兴趣的小伙伴可以详细参考阅读
2023-03-03
使用typescript+webpack构建一个js库的示例详解
这篇文章主要介绍了typescript+webpack构建一个js库,本文主要记录使用typescript配合webpack打包一个javascript library的配置过程，需要的朋友可以参考下
2022-07-07
原生JS实现的简单小钟表功能示例
这篇文章主要介绍了原生JS实现的简单小钟表功能,涉及javascript结合定时器的数值运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
2018-08-08
深度解析JavaScript中的filter()方法
在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
2023-09-09
bootstrap suggest搜索建议插件使用详解
这篇文章主要为大家详细介绍了bootstrap suggest搜索建议插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
利用babel将es6语法转es5的简单示例
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码，所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料，文章通过示例介绍的非常详细，需要的朋友可以参考下。
2017-12-12
js left,right,mid函数
在JAVASCRIPT中LEFT，RIGHT，MID函数的等价函数，非常适合经常用写asp的朋友
2008-06-06