微信小程序基础开发(四)----样式与标签

(一)尺寸单位

当设计稿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是要跳转的页面路径，可以相对路径，可以绝对路径

轮播图

2、target可以选择跳转当前小程序或其他小程序，属性只有self和minProgram,默认self
3、open-type:跳转方式
navigator标签常用属性

(九)rich-text富文本标签

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