当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-30 15:42:37 CSS

(1)尺寸单位当设计稿页面的宽度未知时,假设页面中某个元素的宽度为100px,那么该元素的宽度高度应该为:高度rpx=750rpx*100px/页面px,但是页面中这样写肯定有问题,所以用calc属性/*calc属性css和wxss都支持注意:1.750和rpx之间没有空格2.两边没有空格运算符*/view{width:calc(750rpx*100/375);}(2)样式导入微信小程序支持外部样式的导入,但是有两点需要注意:1.通过@import导入2.路径只能写成相对路径。(3)选择器小程序不支持通配符*,因此所有的标签都可以在初始化时写入,但是例如:.class,#id,element,element,element,nth-child(n),::after,::before等都可以使用(4)在小程序中使用lessnative小程序不支持less,但是可以通过以下方式实现:1.打开编辑器vscode2,安装插件easyless3,并在vscode的设置中配置如下:"less.compile":{"outExt":".wxss"}4.在写样式的地方,新建一个less文件,然后正常编辑(5)view和text标签view标签取代了原来的div标签,但是有一些新的属性。文本标签的特点:1、文本标签2、只能嵌套文本3、长按文本复制(只有这个标签有这个功能)selectable="{{true}}"4、可以对空格和回车进行编码decode="{{true}}"(6)图片标签1.src指定要加载图片的路径。图像的默认宽度和高度为320*2402。mode决定了图片的宽高和适配的图片标签。拉伸宽度和高度以填充图像元素。aspectFit保持纵横比以确保显示图像的长边。轮播图像是常用的。3.小程序支持延迟加载。详见官方微信小程序文档(七)swiper轮播组件1、轮播图片外容器swiper2、各轮播广播项swiper-item3,swiper标签有默认样式,width:100%;height:150px4,swiper的高度不能通过content来实现展开swiper的常用属性(八)navigator导航标签1、url为跳转到的页面路径,可以是相对路径,可以是绝对路径carouselmap2、target可以选择跳转到当前小程序或者其他小程序,属性只有self和minProgram,默认self3,开启类型:jumpmodenavigator标签常用属性(九)rich-text富文本标签相当于vue中的v-html功能富文本常用属性