第四章总结

一、常用组件
view(视图容器)、text(文本)、button(按钮)、image(图片)、form(表单)、video(视频)、checkbox(复选框)、radio(单选框)、input(输入框)、audio(音频)

二、view组件常用属性
(1)hover-start-time  (number型) 手指按住后多久出现点击态 单位毫秒

(2)hover-stay-time  (number型) 手指松开后点击保留时间 单位毫秒

(3)hover-class  (string型) 指定手指按下去的样式,当该属性值为none时无点击态

(4)hover-stop-propagation  (boolean型) 指定是否阻止本节点的祖先节点出现点击态

<view hover-class="touchClass">第一个view</view>
<view hover-class="touchClass" hover-start-time="3000">第二个view</view>
<view hover-class="touchClass" hover-stay-time="3000">第三个view</view>
三、image组件常用属性
image组件默认宽度为300px,默认高度为240px

(1)写法

<image src='...' />

<image></image>

(2)属性

src  (string型) 图片资源地址

mode  (string型) 图片裁剪、缩放模式

webp、fade-in、show-menu-by-longpress...

(3)mode属性值:

缩放:

1》aspectFit  保持宽高比缩放图片,可完整地将图片显示出来

2》scaleToFill (默认) 不保持宽高比缩放图片,将图片宽高完全拉伸填满image元素

3》aspectFill  保持宽高比缩放图片,图片通常只在水平或垂直方向上完整,另一方向会截取

4》widthFix  宽度不变高度自动变化。保持原图宽高比不变

5》heightFix  高度不变宽度自动变化。保持原图宽高比不变

裁剪:

1》top  只显示图片的顶部区域

2》top left  只显示图片的左上区域

3》bottom、center、left、right、top right、bottom left、bottom right...

<image src="../../images/demo01.jpg" mode="aspectFit"></image>
<image src="../../images/demo01.jpg" mode="aspectFill"></image>
四、text组件常用属性
(1)user-select  (boolean型) 文本是否可选,该属性会使文本节点显示为inline-block

(2)space  (string型) 显示连续空格,可选参数为 ensp(中文字符空格一半大小)、emsp(中文字符空格大小)、nbsp(根据字体设置的空格大小)

(3)decode  (boolean型) 是否解码

五、轮播图 (swiper和swiper-item)
swiper组件  =>  滑块视图容器

常用属性:

(1)indicator-dots  (boolean型) 是否显示面板指示点

(2)indicator-color  指示点颜色

(3)indicator-active-color  当前选中的指示点颜色

(4)autoplay  (boolean型)是否自动切换

(5)current  (number型)当前所在滑块的index,默认0

(6)interval  (number型)自动切换时间间隔

(7)circular  (boolean型)是否采用衔接滑动

<swiper style="background-color: pink;" interval="2000" autoplay="true" indicator-dots="true" indicator-color="yellow" indicator-active-color="red">
    <swiper-item>1</swiper-item>
    <swiper-item>2</swiper-item>
    <swiper-item>3</swiper-item>
</swiper>
六、flex布局 (弹性盒子布局)常用属性
容器属性:

(1)flex-direction  主轴方向

(2)flex-wrap  换行

(3)flex-flow   前两个的组合属性

(4)justify-content  项目在主轴上的对齐方式

(5)align-items  项目在交叉轴上的对齐方式

(6)align-content  只适用于多行的容器,定义项目在交叉轴上的对齐方式

项目属性:

(1)order  项目排列顺序 从小到大

(2)flex-grow  项目放大比例

(3)flex-shrink  项目缩小比例

(4)flex-basis 分配多余空间前,项目占的主轴空间

(5)flex  2~4的组合模式

(6)align-self  允许单个[图片]

<view  class="myflex">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
项目与其他项目不同的对齐方式。可覆盖align-items属性

.myflex{
    display: flex;
    background-color: green;
    /* 实现纵向布局 */
    /* flex-direction: column;  */
    /* 实现两端布局 */
    justify-content: space-between;
}

chenwei0504
关注

1


1

0

4.第四章总结1
08-08
第四章总结共同点不同点工作状态非谐振功率放大器输出功率大效率高工作频率低、相对频带宽甲类、乙类、甲乙类谐振功率放大器工作频率高、相对频带窄丙类(丁类、戊类)放大
第4章总结1
08-03
USACO 第四章通关总结2USACO 第四章通关总结By ADVENTop四章相比较于前三章是一个不错的进阶,前三章重在基础,第四章则加入了更多精妙的算法思想
UNIX环境高级编程第四章总结
06-24
UNIX环境高级编程第四章总结,记录所讲到的函数的原型,返回值等
编译原理第四章总结
05-23
编译原理(第3版)第四章总结 语法分析(自下而上分析)
半导体材料:半材第4章总结.doc
05-08
半导体材料:半材第4章总结.doc
用 Notepad++ 写 Java 程序
chengkai730的博客
 579
用 Notepad++ 写 Java 程序
【微信小程序】事件传参的两种方式
云泽野の编程日记
 440
事件传参:在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发.小程序进行事件传参的时候,除了使用data-*属性传递参数外,还可以 使用 mark 标记传递参数mark 是一种自定义属性,可以在组件上添加,用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据然后通过事件对象进行获取自定义数据,在组件上使用mark:自定义属性。
微信小程序上线后获取定位失效
qq_33982898的博客
 353
微信小程序在开发过程中,不论是模拟器还是真机调试都能正常正常获取定位信息。​ 我这里以uniapp开发举例。
验证码识别接口、多种样式验证码识别接口、中英文验证码识别接口
小for学习栏
 457
【代码】验证码识别接口、多种样式验证码识别接口、中英文验证码识别接口。
21世纪教育研究院:应对人口变局_深化教育改革-20230522-24页(1).pdf
最新发布
06-10
21世纪教育研究院:应对人口变局_深化教育改革-20230522-24页(1)
基于大数据的智慧消防整体解决方案.pdf
06-10
基于大数据的智慧消防整体解决方案.pdf
AUTOSAR-SRS-DIODriver.pdf
06-10
AUTOSAR_SRS_DIODriver.pdf
外包.exe
06-10
外包
平方差.cpp
06-10
平方差
纸片战争Beta压缩试行代码.html
06-10
纸片战争Beta压缩试行代码
B2092 开关灯.exe
06-10
B2092 开关灯
onnxruntime-1.15.0-cp310-cp310-linux_armv7l.whl.zip
06-10
python模块onnxruntime版本
未命名12.exe
06-10
未命名12
Java毕业设计-人事档案管理演示视频(高分期末大作业).rar
06-10
Java毕业设计-人事档案管理演示视频(高分期末大作业)
按照此结构 第一章 需求分析 第二章硬件选择分析 第三章软件设计 第四章测试分析 第五章总结 写一篇基于arduino的雨滴传感器课程设计
02-15
第一章 需求分析 在本章中,我们将对arduino雨滴传感器的需求进行分析。我们需要研究arduino雨滴传感器的应用场景,以及用户对arduino雨滴传感器的要求。 第二章 硬件选择分析 在本章中,我们将对arduino雨滴传感器的硬件进行选择分析。我们将考虑arduino板、传感器以及相关配件的性能和价格,并选择
————————————————

                            版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
                        
原文链接:https://blog.csdn.net/chenwei0504/article/details/139608719

  • 20
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值