小程序开发基础-view视图容器

最新推荐文章于 2024-06-01 15:15:00 发布
最新推荐文章于 2024-06-01 15:15:00 发布
阅读量961 收藏
点赞数
分类专栏： 技术
原文链接：https://www.colorgg.com
版权

标题图

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;
}

图片

// 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;
}

图片

// 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

// 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

// 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

// 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

// 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

// 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

属性

排列方式(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;
}

开源github分享

Wechat_small_program_Share
微信小程序分享

Jeremy_Yoyo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
内置组件 ＞ 视图容器 ＞ view
洪茂杰的博客
07-29 842
参考代码的位置 Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。 横向布局 <view cl...
微信小程序 ＜view＞＜/view＞容器嵌套，wxss样式修改内部内部样式不产生效果
weixin_59131972的博客
06-05 1686
</view> 容器嵌套，我在对内部容器包括的内容做修改时，不产生效果，后来发现这是因为引用方式有误。同一组标签我用相同彩色笔，给大家勾画出来了，大家也看到了，这种存有标签类语言 ，一定要看好标签匹配名，多或者少都会出错。<view class="title"> 来自秦岭山区最天然的馈赠</view>这是为什么，这是因为，<view> </view> ,容器层级引用是这样的。，除了这个还有注意你给定义的标签名，加上（" "） 双引号了么。<view> 示例二
微信小程序的view的属性值和用法
最新发布
suqi_123123的博客
06-01 1205
微信小程序中的 view 组件具有多种属性，用于控制其样式、行为和交互。class / style: 控制视图的样式。hover-stay-time: 控制悬停时的样式和行为。data-xxx: 自定义数据属性，可在 JavaScript 中访问。bindtap / catchtap: 绑定点击事件。animation: 指定动画效果。hidden: 控制视图是否隐藏。控制滚动行为。selectable: 控制文本是否可选中。
微信小程序--基础内容（详解）（一）
叶子的博客
10-31 7356
微信小程序基础内容，带你快速入门
view标签class属性
qq_44898112的博客
01-22 5951
<view class="属性名"></view> 其中class的值对应wxss（全局或当前页面）中定义的属性名 例：index.js：<view class="container"></view> app.wxss： .container{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-be.
view布局-微信小程序
蛟~
04-04 644
创建一个视图容器 view (wxml) <view class="box">这是一个view</view> (wxss) .box{ width:200rpx; height:200rpx; color:red; background:#c4c42e; } hover-class 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果 (wxml) <view class="box" hover-class
列表内容根据按钮切换（vue）
南野子
08-23 1426
列表内容根据按钮切换（vue） 1.列表按钮切换：view代码 <view class=""> <!-- 菜单少直接写死，用class判断条件，将0或1传值； --> <view class="flex"> <view class="flex-sub padding-sm margin-xs radius " v-bind:class="TabCur==0? 'bg-grey' : 'bg' " @click=
小程序开发基础之view视图容器
12-29
本文介绍了小程序开发基础之view视图容器，分享给大家，具体如下： 视图容器 // wxml <view class=section> <view class=section__title>flex-direction: row</view> <view class=flex-wrp_one> <view class=...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。...对于希望进入微信小程序开发领域的初学者来说，这是一个很好的起点。
微信小程序开发-餐饮商户模板案例源码.zip
08-15
3. **组件化开发**：微信小程序支持丰富的组件化开发，如视图容器（view、scroll-view等）、基础内容（text、image等）、表单组件（button、input等）、导航（navigator）、媒体组件（audio、video等）以及地图、...
零基础微信小程序开发.rar
03-18
- 组件：小程序提供了一系列基础组件，如视图容器（view、scroll-view）、基础内容（text、image）、表单组件（input、button）等，它们是构建界面的基础。 - API：包括网络请求、用户信息获取、设备信息、位置...
小程序 动态绑定class
路漫漫其修远兮，吾将上下而求索
10-12 1万+
微信小程序提供了比较便捷的语法，使我们能够快速地动态绑定class 用法：<view class="{{ 表达式?'A':'B'}}" ></view> 在一个标签的class里添加{{}}模板语法，模板里面是一个三元判别式，其中表达式一般引用data中的属性，表达式返回true或者false，A，B是class名，按照三元判别式的逻辑引用A或B。 PS： 当然可以同时引用多个，如<view class="E F {{表达式?'A':'B' }} {{表达式?'C...
微信小程序基础知识
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
10-09 4100
基础用法和配置
Android自定义View
fakerXuan的博客
05-31 256
Android自定义ViewAndroid自定义View概述Android开发进阶的必经之路为什么要自定义View自定义View的基本方法自定义控件分类自定义View基础View的分类View类简介AttributeSet与自定义属性View视图结构Android坐标系View位置（坐标）描述位置获取方式Android中颜色相关内容View树的绘制流程View树的绘制流程是谁负责的？view的添加view的绘制流程measurelayoutdrawLayoutParamsMarginLayoutParams
微信小程序-view(视图容器)
Ethan_LG的专栏
10-25 1万+
示例 flex-direction: row 1 2 3 flex-direction: column 1 2 3 示例讲解 学过HTML的童靴很容易看懂上面的代码。没用过这种标签语言的，其实也很容易看懂。稍微讲解一下： 1.单个的view 这就是一个单个的视图。“section”则是写
View的简介
编程之美
03-11 1万+
认识一个新的事物，首先我们从概念上讲，我们需要知道，这个事物 是什么，这个事物有什么用途？ 对应到View 上，我们要搞明白 View 的定义以及工作原理。  1.View是什么？   View是屏幕上的一块矩形区域，它负责用来显示一个区域，并且响应这个区域内的事件。可以说，手机屏幕上的任意一部分看的见得地方都是View，它很常见，比如 TextView 、ImageView 、Button
微信小程序学习之路——组件定义及属性（view组件）
创作星球
03-29 2万+
小程序定义了各种各样的组件，它们在WXML中起着各不同的作用。与HTML元素一样，一个组件是指从组件开始标签到结束标签的所有代码，由于组件可能会被转译为不同端对应的代码，所以在页面创建过程中，不能使用小程序组件标签以外的标签。 组件定义及属性 1）组件是视图层的基本组成单元 2）组件自带一些功能与微信风格的样式 3）一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之...
【快速文档】view标签，小程序中的div
吴茗的博客
10-01 3862
简单使用 <view>这是一个view标签</view> 如果你熟悉传统的前端开发的话，那么无需多言，你肯定知道，这个view标签，就相当于是以前的div。俗话说得好，view是一个筐，什么都可以往里装。 默认的样式就是这样的 这有什么特别的吗？没有，但是，它就是好用。以前，如果在前端开发中，一直使用div会被人看不起，有人会来质问你，你怎么老用div啊？这关你x事！不过现在我们不必有这种担忧了。任何犹豫不决的时候，放心大胆的用view就是了。 进阶使用 vie..
微信小程序中 <view> 标签与 <block> 标签的区别
热门推荐
纠缠AI的亮子
05-26 4万+
两者的区别是，&lt;view&gt; 是一个组件，会在页面上做渲染；&lt;block&gt;不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。下面是两个&lt;block&gt;使用的例子：wx:if&lt;block wx:if="{{true}}"&gt; &lt;view&gt; text &lt;/view&gt; &lt;view
微信小程序开发-比较数字大小-知识点讲解.pptx
11-28
在微信小程序开发的学习路径中，第3章深入探讨了"比较数字大小"这一主题，并特别关注了组件的使用和理解。小程序组件是构建页面结构的基础，它们是视图层的基石，自带微信特有的UI风格和功能特性。例如，组件用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值