0
点赞
收藏
分享

微信扫一扫

微信小程序基础学习(WXSS)

简单聊育儿 2022-02-13 阅读 145

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

 

WXSS 用来决定 WXML 的组件应该怎么显示。

与 CSS 相比,WXSS 扩展的特性有:单位尺寸和样式导入

一、书写位置

1.1内联样式

<text style="background-color: aqua;font-size: 20px;">内联样式</text>

1.2页内样式

写在.wxss文件中

.wxsstest01{
    height: 30px;
    width: 200px;
    background-color: rgba(146, 146, 236, 0.692);
    font-size: 30px;
}

1.3全局样式

全局样式写在app.wxss中,这其中的样式在全局的页面中都是可以直接使用的,而对于组件来说是应用不了的

1.4优先级

内联>页内>全局;

可以通过!important来提升优先级

1.5wxss的导入

使用@import可以导入其他wxss样式文件


二、wxss的尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。


三、选择器


四、flex布局

wxss中的flex布局与css的flex布局相同,可以往前翻看CSS中的flex布局来进行学习


五、样式基础库

样式基础库

在使用样式基础库时,需要将页面结构、页面样式(style中)、页面逻辑都复制过来

应用组件要在.json文件中声明组件路径.


六、组件

在微信的官方文件中可以看到更加详细的组件内容

6.1view组件

view组件是个块级元素,默认效果是纵向排布的

view组件的一些属性

hover-stop-propagation需要用双大括号来写true和false

<view hover-class="tap" hover-start-time="0" hover-stay-time="0" hover-stop-propagation="{{true}}">111</view>

6.2text组件

text组件内部只能嵌套text组件,不独占一行也不能自由修改尺寸,但是可以通过display属性来进行修改

text的一些属性

 decode和空格转义符相结合

<text space="emsp" selectable="{{true}}">1 1 1</text>
<text space="ensp">1 1 1</text>
<text space="nbsp">1 1 1</text>
<text decode="{{true}}">1&nbsp;&nbsp;&nbsp;1</text>

蓝色部分被选中

6.3image组件

mode的合法值

直接使用src来导入本地图片

6.4icon组件

 type的有效值只能为:

 success,   success_no_circle,   info, warn,   waiting,   cancel,   download,   search,   clear

通过color可以直接更换图标的颜色

6.5button组件

button组件一般用于接收用户点击来执行不同逻辑

 button的属性:

①size属性值为default默认大小和mini小尺寸大小

②type属性为按钮的样式,属性值为default白色,primary绿色,warn红色三种颜色3

③plain属性表示镂空效果,下图中下面为镂空效果

 ④loading属性会在按钮前出现加载样式的图标

 ⑤from-type用于from组件,点击分别会触发form组件的 submit(提交表单)/reset(重置表单) 事件

 

 6.6swiper+swiper-item

swiper是指滑块试图容器,其中只可放置swiper-item组件,否则会导致未定义的行为,常用于轮播图当中。

swiper不单独使用,只有在swiper标签中嵌套swiper-item标签后才会显示内容。

 

 

举报

相关推荐

0 条评论