个人博客网站开发的背景,wordpress 搜索内容,泰安网络营销推广,《python编程基础》微信小程序里的组件就是html里的标签#xff0c;但其组件都自带UI风格和特定的功能效果
一、常用组件
view#xff08;视图容器#xff09;、text#xff08;文本#xff09;、button#xff08;按钮#xff09;、image#xff08;图片#xff09;、form#xff08…微信小程序里的组件就是html里的标签但其组件都自带UI风格和特定的功能效果
一、常用组件
view视图容器、text文本、button按钮、image图片、form表单、video视频、checkbox复选框、radio单选框、input输入框、audio音频 二、view组件常用属性
1hover-start-time number型 手指按住后多久出现点击态 单位毫秒
2hover-stay-time number型 手指松开后点击保留时间 单位毫秒
3hover-class string型 指定手指按下去的样式当该属性值为none时无点击态
4hover-stop-propagation boolean型 指定是否阻止本节点的祖先节点出现点击态
view hover-classtouchClass第一个view/view
view hover-classtouchClass hover-start-time3000第二个view/view
view hover-classtouchClass hover-stay-time3000第三个view/view 三、image组件常用属性
image组件默认宽度为300px默认高度为240px
1写法
image src... /
image/image
2属性
src string型 图片资源地址
mode string型 图片裁剪、缩放模式
webp、fade-in、show-menu-by-longpress...
3mode属性值
缩放
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 modeaspectFit/image
image src../../images/demo01.jpg modeaspectFill/image 四、text组件常用属性
1user-select boolean型 文本是否可选该属性会使文本节点显示为inline-block
2space string型 显示连续空格可选参数为 ensp中文字符空格一半大小、emsp中文字符空格大小、nbsp根据字体设置的空格大小
3decode boolean型 是否解码 五、轮播图 swiper和swiper-item
swiper组件 滑块视图容器
常用属性
1indicator-dots boolean型 是否显示面板指示点
2indicator-color 指示点颜色
3indicator-active-color 当前选中的指示点颜色
4autoplay boolean型是否自动切换
5current number型当前所在滑块的index默认0
6interval number型自动切换时间间隔
7circular boolean型是否采用衔接滑动
swiper stylebackground-color: pink; interval2000 autoplaytrue indicator-dotstrue indicator-coloryellow indicator-active-colorredswiper-item1/swiper-itemswiper-item2/swiper-itemswiper-item3/swiper-item
/swiper 六、flex布局 弹性盒子布局常用属性
容器属性
1flex-direction 主轴方向
2flex-wrap 换行
3flex-flow 前两个的组合属性
4justify-content 项目在主轴上的对齐方式
5align-items 项目在交叉轴上的对齐方式
6align-content 只适用于多行的容器定义项目在交叉轴上的对齐方式
项目属性
1order 项目排列顺序 从小到大
2flex-grow 项目放大比例
3flex-shrink 项目缩小比例
4flex-basis 分配多余空间前项目占的主轴空间
5flex 2~4的组合模式
6align-self 允许单个项目与其他项目不同的对齐方式。可覆盖align-items属性
view classmyflex
view1/view
view2/view
view3/view
/view
.myflex{display: flex;background-color: green;/* 实现纵向布局 *//* flex-direction: column; *//* 实现两端布局 */justify-content: space-between;
}
