社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 微信小程序 小程序开发 微信小程序：view（视图容器 ）组件解读和分析

微信小程序：view（视图容器 ）组件解读和分析

高洛峰
高洛峰
Mar 16, 2017 pm 02:09 PM
微信小程序

view组件说明:
    视图容器
    跟HTML代码中的DIV一样，可以包裹其他的组件，也可以被包裹在其他的组件内部。用起来比较自由随意，没有固定的结构。

view组件的用法：

微信小程序：view（视图容器 ）组件解读和分析

示例项目的wxml代码：

<view  class="btnGroup">
        <view class="item orange" >退格</view>
        <view class="item orange" >清屏</view>
        <view class="item orange" >+/-</view>
        <view class="item orange" >+</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >9</view>
        <view class="item blue" >8</view>
        <view class="item blue" >7</view>
        <view class="item orange" >-</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >6</view>
        <view class="item blue" >5</view>
        <view class="item blue" >4</view>
        <view class="item orange" >×</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >3</view>
        <view class="item blue" >2</view>
        <view class="item blue" >1</view>
        <view class="item orange" >÷</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >0</view>
        <view class="item blue" >.</view>
        <view class="item blue" >历史</view>
        <view class="item orange" >=</view>
      </view>
登录后复制

示例项目的WXSS代码：

.btnGroup{
    display:flex;
    flex-direction:row;
}
.orange{
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
}
.blue{
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
}
登录后复制

视图样式flex-direction: row的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下

<view class="flex-wrp">
    <view class="flex-item red" ></view>
    <view class="flex-item green" ></view>
    <view class="flex-item blue" ></view>
</view>
登录后复制

WXSS代码如下：

.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式flex-direction: column的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp column">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.column{
   flex-direction:column;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式justify-content: flex-start的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.flex-start{
    flex-direction:row;
    justify-content: flex-start;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式justify-content: flex-end的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.flex-end{
    flex-direction:row;
    justify-content: flex-end;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式justify-content: center的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp justify-content-center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.justify-content-center{
    flex-direction:row;
    justify-content: center;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式justify-content: space-between的效果图：

微信小程序：view（视图容器 ）组件解读和分析‘

WXML代码如下：

<view class="flex-wrp space-between">
  <view class="flex-item" style="background: red"></view>
  <view class="flex-item" style="background: green"></view>
  <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.space-between{
  flex-direction:row;
  justify-content: space-between;
}
.flex-wrp{
  height: 100px;
  display:flex;
  background-color: #FFFFFF;
}
.flex-item{
  width: 100px;
  height: 100px;
}
.red{
  background: red;
}
.green{
  background: green;
}
.blue{
  background: blue;
}
登录后复制

视图样式justify-content: space-around的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp space-around">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.space-around{
    flex-direction:row;
    justify-content: space-around;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式align-items: flex-end的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp align-items-flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.align-items-flex-end{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-end;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式align-items: center的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp align-items-center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.align-items-center{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

视图样式align-items: flex-start的效果图：

微信小程序：view（视图容器 ）组件解读和分析

WXML代码如下：

<view class="flex-wrp align-items-flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>
登录后复制

WXSS代码如下：

.align-items-flex-start{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-start;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
登录后复制

主要属性：

排列方式（flex-direction），用于wxss

微信小程序：view（视图容器 ）组件解读和分析

弹性项目内容对齐（justify-content），用于wxss

微信小程序：view（视图容器 ）组件解读和分析

项目在容器内侧轴方位的对齐方式（align-items），用于wxss

微信小程序：view（视图容器 ）组件解读和分析

以上是微信小程序：view（视图容器 ）组件解读和分析的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
威尔R.E.P.O.有交叉游戏吗？
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7552
15
CakePHP 教程
1382
52
steam的账户名称是什么格式
83
11
win11激活密钥永久
58
19
NYT连接提示和答案
22
95
显示更多
Related knowledge
闲鱼微信小程序正式上线 闲鱼微信小程序正式上线 Feb 10, 2024 pm 10:39 PM

闲鱼官方微信小程序悄然上线，在小程序中可以发布闲置与买家/卖家私信交流、查看个人资料及订单、搜索物品等，有用好奇闲鱼微信小程序叫什么，现在快来看一下。闲鱼微信小程序叫什么答案：闲鱼，闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能；3、想要使用的话必要要开通微信支付才可以购买；

微信小程序实现图片上传功能 微信小程序实现图片上传功能 Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展，微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景，还支持开发者自定义功能，其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能，并提供具体的代码示例。一、前期准备工作在开始编写代码之前，我们需要先下载并安装微信开发者工具，并注册成为微信开发者。同时，还需要了解微信

实现微信小程序中的下拉菜单效果 实现微信小程序中的下拉菜单效果 Nov 21, 2023 pm 03:03 PM

实现微信小程序中的下拉菜单效果，需要具体代码示例随着移动互联网的普及，微信小程序成为了互联网开发的重要一环，越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷，但也需要掌握一定的开发技巧。在微信小程序的开发中，下拉菜单是一个常见的UI组件，实现了更好的用户操作体验。本文将详细介绍如何在微信小程序中实现下拉菜单效果，并提供具

实现微信小程序中的图片滤镜效果 实现微信小程序中的图片滤镜效果 Nov 21, 2023 pm 06:22 PM

实现微信小程序中的图片滤镜效果随着社交媒体应用的流行，人们越来越喜欢在照片中应用滤镜效果，以增强照片的艺术效果和吸引力。在微信小程序中也可以实现图片滤镜效果，为用户提供更多有趣和创造性的照片编辑功能。本文将介绍如何在微信小程序中实现图片滤镜效果，并提供具体的代码示例。首先，我们需要在微信小程序中使用canvas组件来加载和编辑图片。canvas组件可以在页面

使用微信小程序实现轮播图切换效果 使用微信小程序实现轮播图切换效果 Nov 21, 2023 pm 05:59 PM

使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序，具有简单、高效的开发和使用特点。在微信小程序中，实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果，并给出具体的代码示例。首先，在微信小程序的页面文件中，添加一个轮播图组件。例如，可以使用&lt;swiper&gt;标签来实现轮播图的切换效果。在该组件中，可以通过b

实现微信小程序中的图片旋转效果 实现微信小程序中的图片旋转效果 Nov 21, 2023 am 08:26 AM

实现微信小程序中的图片旋转效果，需要具体代码示例微信小程序是一种轻量级的应用程序，为用户提供了丰富的功能和良好的用户体验。在小程序中，开发者可以利用各种组件和API来实现各种效果。其中，图片旋转效果是一种常见的动画效果，可以为小程序增添趣味性和视觉效果。在微信小程序中实现图片旋转效果，需要使用小程序提供的动画API。下面是一个具体的代码示例，展示了如何在小程

实现微信小程序中的滑动删除功能 实现微信小程序中的滑动删除功能 Nov 21, 2023 pm 06:22 PM

实现微信小程序中的滑动删除功能，需要具体代码示例随着微信小程序的流行，开发者们在开发过程中经常会遇到一些常见功能的实现问题。其中，滑动删除功能是一个常见、常用的功能需求。本文将为大家详细介绍如何在微信小程序中实现滑动删除功能，并给出具体的代码示例。一、需求分析在微信小程序中，滑动删除功能的实现涉及到以下要点：列表展示：要显示可滑动删除的列表，每个列表项需要包

闲鱼微信小程序叫什么 闲鱼微信小程序叫什么 Feb 27, 2024 pm 01:11 PM

闲鱼官方微信小程序已经悄然上线，它为用户提供了一个便捷的平台，让你可以轻松地发布和交易闲置物品。在小程序中，你可以与买家或卖家进行私信交流，查看个人资料和订单，以及搜索你想要的物品。那么闲鱼在微信小程序中究竟叫什么呢，这篇教程攻略将为您详细介绍，想要了解的用户们快来跟着本文继续阅读吧！闲鱼微信小程序叫什么答案：闲鱼，闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能；3、

See all articles