扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序中如何实现view视图容器
  • 127

0
分享到

小程序中如何实现view视图容器

2024-04-02 19:04:59 127人浏览 泡泡鱼
摘要

小编给大家分享一下小程序中如何实现view视图容器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体如下：视图容器// 

小编给大家分享一下小程序中如何实现view视图容器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体如下：

视图容器

// wxml
<view class="section">
 <view class="section__title">flex-direction: row</view>
 <view class="flex-wrp_one">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_one{
 display: flex;
 flex-direction: row;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

图片

// wxml
<view class="section">
 <view class="section__title">flex-direction: column</view>
 <view class="flex-wrp_two">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_two{
 display: flex;
 flex-direction: column;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

图片

// wxml
<view class="section">
 <view class="section__title">justify-content: flex-start</view>
 <view class="flex-wrp_three">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss 
.flex-wrp_three{
 display: flex;
 justify-content: flex-start;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

view

// wxml
<view class="section">
 <view class="section__title">justify-content: flex-end</view>
 <view class="flex-wrp_four">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_four{
 display: flex;
 justify-content: flex-end;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

view

// wxml
<view class="section">
 <view class="section__title">justify-content: center</view>
 <view class="flex-wrp_five">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_five{
 display: flex;
 justify-content: center;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

view

// wxml
<view class="section">
 <view class="section__title">justify-content: space-between</view>
 <view class="flex-wrp_six">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_six{
 display: flex;
 justify-content: space-between;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

view

// wxml
<view class="section">
 <view class="section__title">justify-content: space-around</view>
 <view class="flex-wrp_seven">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_seven{
 display: flex;
 justify-content: space-around;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

view

// wxml
<view class="section">
 <view class="section__title">justify-content: space-evenly</view>
 <view class="flex-wrp_eight">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_eight{
 display: flex;
 justify-content: space-evenly;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

小程序中如何实现view视图容器

view

属性

排列方式(flex-direction)描述
row横向排列
column纵向排列
项目内容对齐（justify-content）描述
flex-start向行头紧挨
flex-end向行尾紧挨
center居中紧挨
space-between平均分布
space-around平均分布 ,两边留有一半间隔
space-evenly两边间隔与中间相同

源码

// wxml
<view class="section">
 <view class="section__title">flex-direction: row</view>
 <view class="flex-wrp_one">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">flex-direction: column</view>
 <view class="flex-wrp_two">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: flex-start</view>
 <view class="flex-wrp_three">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: flex-end</view>
 <view class="flex-wrp_four">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: center</view>
 <view class="flex-wrp_five">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: space-between</view>
 <view class="flex-wrp_six">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: space-around</view>
 <view class="flex-wrp_seven">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: space-evenly</view>
 <view class="flex-wrp_eight">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_one{
 display: flex;
 flex-direction: row;
}

.flex-wrp_two{
 display: flex;
 flex-direction: column;
}

.flex-wrp_three{
 display: flex;
 justify-content: flex-start;
}

.flex-wrp_four{
 display: flex;
 justify-content: flex-end;
}

.flex-wrp_five{
 display: flex;
 justify-content: center;
}

.flex-wrp_six{
 display: flex;
 justify-content: space-between;
}

.flex-wrp_seven{
 display: flex;
 justify-content: space-around;
}

.flex-wrp_eight{
 display: flex;
 justify-content: space-evenly;
}

.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

以上是“小程序中如何实现view视图容器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网JavaScript频道！

--结束END--

本文标题: 小程序中如何实现view视图容器

本文链接: https://lsjlt.com/news/70790.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 小程序中如何实现view视图容器
    小编给大家分享一下小程序中如何实现view视图容器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体如下：视图容器// ...
    99+
    2024-04-02
  • 【uniapp小程序】视图容器cover-view
    🍒观众老爷们好呀，这里是前端小刘不怕牛牛频道，小程序系列又更新新文章啦，今天的内容是uniapp小程序的视图容器，cover-view 🍒准备好了吗？那我们就发车啦...
    99+
    2023-09-03
    小程序 前端 微信小程序
  • 微信小程序中如何实现滚动视图容器
    这篇文章主要为大家展示了“微信小程序中如何实现滚动视图容器”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序中如何实现滚动视图容器”这篇文章吧。直接上两种...
    99+
    2024-04-02
  • 微信小程序视图容器view怎么用
    这篇文章主要为大家展示了微信小程序视图容器view怎么用，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“微信小程序视图容器view怎么用”这篇文章吧。view视图容器。属性名类型默认值说明hover...
    99+
    2023-06-26
  • uniapp小程序视图容器cover-view使用详解
    目录一，cover-view1.1 基础知识1.2 各平台差异1.3 不支持的CSS附：uni-app中cover-view覆盖原生组件总结一，cover-view 首先我们需要知道...
    99+
    2024-04-02
  • 微信小程序常用视图容器组件如何使用
    这篇文章主要讲解了“微信小程序常用视图容器组件如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序常用视图容器组件如何使用”吧！1、组件概述组件是视图层基本的组成单元，具备UI风...
    99+
    2023-06-29
  • Android小程序中如何实现Icon图标
    这篇文章主要讲解了“Android小程序中如何实现Icon图标”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Android小程序中如何实现Icon图标”吧！小程序原生提供的Icon组件属性属...
    99+
    2023-06-25
  • 微信小程序视图容器movable-area怎么用
    小编给大家分享一下微信小程序视图容器movable-area怎么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！movable-area基础库 1.2.0 开始支持，低版本需做兼容处理movable-view 的可移动区域...
    99+
    2023-06-26
  • 微信小程序中如何使用scroll-view实现flex布局
    小编给大家分享一下微信小程序中如何使用scroll-view实现flex布局，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！1.效果图2.在scroll-view里加一层容器，使用flex布...
    99+
    2024-04-02
  • 微信小程序中如何实现地图map
    这篇文章主要介绍微信小程序中如何实现地图map，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序 地图map微信小程序map地图属性名类型默认值说明longitudeNumbe...
    99+
    2024-04-02
  • 微信小程序中如何实现轮播图
    这篇文章主要介绍了微信小程序中如何实现轮播图，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。业务需求：5个图片轮番播放，可以左右滑动，点击指示...
    99+
    2024-04-02
  • 微信小程序中如何实现map地图
    小编给大家分享一下微信小程序中如何实现map地图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！前言微信小程序地图操作比较简单，a...
    99+
    2024-04-02
  • 微信小程序视图容器和基本内容组件图文详解
    目录前言一，视图容器类组件1.1 view1.2 srcoll-view1.3 swiper和swiper-item二，基本内容组件2.1 text2.2 rich-text总结前言...
    99+
    2024-04-02
  • 微信小程序滑块视图容器swiper怎么用
    这篇“微信小程序滑块视图容器swiper怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序滑块视图容器swipe...
    99+
    2023-06-26
  • 小程序web-view页面如何返回小程序
    小程序web-view页面返回小程序的方法：用navigateTo跳转可以返回，代码：// <script type="text/javascript" src="https...
    99+
    2024-04-02
  • 微信小程序swiper滑块视图容器有什么用
    这篇文章给大家分享的是有关微信小程序swiper滑块视图容器有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。　　swiper　　滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。...
    99+
    2023-06-26
  • 微信小程序如何实现input框中加入小图标
    这篇文章主要介绍微信小程序如何实现input框中加入小图标，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！最近入坑小程序，要求在小程序的输入框中展示一个小图标，页面如下:然后按照，ht...
    99+
    2024-04-02
  • 小程序如何实现图片预加载
    这篇文章主要为大家展示了“小程序如何实现图片预加载”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“小程序如何实现图片预加载”这篇文章吧。　　　　网页有页面预加载，小程序也有图片预加载，小程序图片加...
    99+
    2023-06-26
  • 微信小程序如何实现雷达图
    这篇文章给大家分享的是有关微信小程序如何实现雷达图的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），是财务分析报表的一种。即将...
    99+
    2023-06-26
  • 微信小程序常用视图容器组件使用详解
    目录1、组件概述2、常用的试图容器组件2.1 view2.2 scroll-view2.3 swiper1、组件概述 组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作