微信小程序入门第二篇2-1

UI精讲

1.获取输入框的信息----通过绑定方法bindInput
2.获取APP中的全局变量-----var app=getApp();
3.rpx: 可以根据屏幕宽度进行自适应
4.在微信小程序中所触发的各种事件,都可以通过event事件来将信息获得。event事件的属性中的target和currentarget几乎是一样的,只有在冒泡事件的时候是不一样的。
5.在wxml页面中,data-设置变量的时候是不分大小写的。但是在js里event的dataset就全部转换成了小写,我们在JS页面也只能用小写才能用它!要记得URL中的也要换成小写

布局

布局分为flex布局、相对定位和绝对定位
1.flex布局
flex-direction—决定元素的排列方式
flex-wrap—决定元素如何换行
flex-flow是以上两种的简写
justify-content—元素在主轴上的对齐方式
align-items—元素在交叉轴上的对齐方式
2.绝对定位和相对定位
relative是相对自己的原位置,原位置存在
absolute是相当于离他最近的已定位的父级定位,原位置不存在了。用来覆盖

组件

1.swiper
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为,其中是swiper-item
2.scroll-view
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height
3.text支持转义字符如\n

多媒体

音频audio----action为object类型,控制播放、暂停等需要定义它-----action:{method…}—要用大括号

案例

1.实现一个一左一右布局。
flex可以实现-----space-between —两个子元素可以实现左右对齐的效果。
定义在父元素中可以实现
2.flex-wrap实现换行
3.背景颜色的渐变: -webkit-linear-gradient()
如background: -webkit-linear-gradient(top,white,lightblue ,rgb(83, 201, 248))
top: 表示上下渐变(意义还包括从哪里开始),还可以设置为左右渐变(值为 left )
white: 是第一个颜色名
lightblue : 第二个颜色名
rgb(83, 201, 248) : 第三个颜色名 (我们也可以设置两种颜色)

发布了2 篇原创文章 · 获赞 2 · 访问量 54

猜你喜欢

转载自blog.csdn.net/hc121ch/article/details/104472112
今日推荐