关于css:微信小程序基础开发四样式与标签

(一)尺寸单位

当设计稿 page 的宽度未知时，假如 page 内的一个元素的宽度为100px，那么元素的宽度 height 应该为：

height rpx=750 rpx*100 px/page px

然而页面中这样的写法必定有问题，因而应用 calc 属性

/* 
  calc 属性 css 和 wxss 都反对
    留神：1、750 和 rpx 两头无空格
          2、运算符的两边无空格
*/
view{width:calc(750rpx*100/375);
}

(二)款式导入

微信小程序反对内部款式的导入，但有两个留神点：
1、通过 @import 来导入
2、门路只能写相对路径

(三)选择器

小程序中不反对通配符 *，因而初始化时能够写上所有标签
然而例如：.class,#id,element,element,element,nth-child(n),::after,::before等能够应用

(四)小程序中应用 less

原生的小程序并不反对less，但能够通过以下形式实现：
1、关上编辑器 vs code
2、装置插件 easy less

3、在 vs code 的设置中进行如下配置：

 "less.compile": {"outExt": ".wxss"}

4、在编写款式的中央，新建 less 文件，而后失常编辑

(五)view和 text 标签

view标签代替了原来的 div 标签，但又多了一些新的属性

text 标签的特点：
1、文本标签
2、只能嵌套 text
3、长按文字能够复制(只有该标签具备此性能) selectable="{{true}}"
4、能够对空格、回车进行编码 decode="{{true}}"

(六)image图片标签

1、src 指定要加载的图片的门路
图片存在默认宽度和高度 320*240
2、mode 决定图片和图片标签的宽高做适配
scaleToFill 默认值 不放弃纵横比缩放图片，使图片宽高被拉伸至填满 image 元素
aspectFit 放弃宽高比 确保图片的长边 显示进去，轮播图罕用
3、小程序中反对用lazy-load 进行懒加载
当图片呈现在视口高低高度三屏的时候，本人开始加载图片

详情参考微信小程序官网文档

(七)swiper轮播组件

1、轮播图外层容器 swiper
2、每一个轮播项swiper-item
3、swiper 标签存在默认款式，width:100%;height:150px
4、swiper高度无奈实现由内容撑开

swiper 罕用属性

(八)navigator导航标签

1、url是要跳转的页面门路，能够相对路径，能够绝对路径

<navigator url="/pages/index/index"> 轮播图 </navigator>

2、target能够抉择跳转以后小程序或其余小程序，属性只有 self 和minProgram, 默认self
3、open-type: 跳转形式
navigator 标签罕用属性

(九)rich-text富文本标签

相当于 vue 中的 v-html 性能
rich-text 罕用属性