网站首页 >> 牛刀云小程序开发 >> 第1篇制作模式 >> 页面制作 >> 组件基础

2.3.3.4 组件样式

组件的默认展现效果是预定义样式设置的结果,修改组件样式的方法有如下4种。

l  常用样式:基础且常用的样式,包括基本样式、文字样式、边框、边距及定位等,

l  组件特用样式:在常用样式基础上,包含组件自身特点的样式

l  自定义样式:可以定义当前页面样式,也可以定义所有页面都可使用的通用样式

l  动态样式:会根据数据变化的样式,例如奇偶行不同色、标记列表当前行

 

1、预定义样式

组件几乎都有预定义样式,预定义样式就是系统样式,实现了在小程序中运行和在浏览器中运行具有相同效果的能力。又结合了WeUI 的样式,提供同微信APP视觉体验一致的样式,令用户的使用感知更加统一。

 

2、常用样式

常用样式有5种,分别是基本样式、文字样式、边框样式、边距样式及定位样式。

l  基本样式

基本样式提供宽度、高度、背景颜色、是否可见和透明度等样式。其中是否可见常用的有3种,清空表示可见,设置为none表示不可见,设置为block表示可见且占满一整行,即将行内元素变为行级元素。例如文本组件就是行内元素,设置为block之后,变为行级元素,占满一行。透明度是01之间的小数,数值越小越透明。

 

l  文字样式

文字样式提供字体、大小、颜色、粗体、斜体、下划线、中横线、对齐方式和空白符处理等样式。其中对齐方式分为左对齐、居中对齐和右对齐。只对行级元素有效,对行内元素无效。例如:在区块内添加文本组件,设置区块的文字样式为右对齐,会发现里面的文本组件右对齐了。

 

l  边距样式

边距样式提供外边距margin和内边距padding等样式。外边距是设置组件边框距离外部组件的距离,内边距是设置组件边框距离内部组件的距离。如图4-27所示。距离分为上下左右4个方向上的距离,可以单独设置。

 

l  边框样式

边框样式提供边框线条样式、线条宽度和线条颜色等样式。如图4-27所示。边框分为上下左右4个边上的边框,单击中间的小格子,显示全部边框,单击四周的小格子,单击哪个方向的小格子,就显示那个方向的边框。

4-27  边距和边框样式

 

l  定位样式

定位样式提供定位方式、距离和优先等级等样式。其中定位方式常用的有2种:绝对定位和相对定位。绝对定位和相对定位配套使用,相对定位定义绝对定位的参照物,绝对定位定义距离参照物的上下左右4个方向的距离,如图4-28所示,一般定义两个方向的距离即可。优先等级定义重叠在一起的组件的前后顺序,用数字表示,数字越大,显示时越靠前,在前面显示的组件遮挡后面的组件。

4-28  绝对定位与相对定位

l  圆角样式

圆角样式提供设置组件左上角、右上角、左下角、右下角的弯曲弧度。默认是直角,最大可以设置为圆形。系统提供了几种常用的圆角样式,可以直接选择。

 

l  阴影样式

阴影样式提供组件阴影的设置。分为4个属性:颜色、偏移、模糊和尺寸。“颜色”属性用来设置阴影的颜色。“偏移”属性用来设置阴影的位置,输入正数,在组件的右下方出现阴影,输入负数,在组件的左上方出现阴影。“模糊”属性设置阴影的模糊半径,使得阴影显示渐变效果。“尺寸”属性用来设置阴影扩展半径,控制阴影的扩展方向:输入正数,阴影会向外扩展,输入负数,阴影向内缩小。这个属性需要和模糊半径配合使用,通常扩展半径设置为糊模半径大小,并取其负值。

 

3、组件特有样式

例如按钮组件、行列组件都有自己的样式,如图4-29所示。

4-29  组件特有样式

 

4、自定义样式

    属性栏中提供的样式毕竟是有限的,可以在自定义样式中,通过书写CSS代码实现自定义的样式效果。自定义样式分为通用样式和当前页面样式。在通用样式中设置的样式,在其它页面中也能看到,也能使用。为了区别系统样式,所有自定义样式以c-开头。

 

5、动态样式

动态样式设置要先添加自定义样式,然后在动态样式中设置自定义样式名称及其生效条件。生效条件是动态属性,通过情景设置什么时候生效,什么时候不生效。

 

示例一:动态列表选中行突出显示

首先添加1个自定义样式,选中行样式。然后在动态样式属性中,设置这个样式的生效条件为:默认情景不生效,当“动态列表当前行.主键”等于“分类.主键”时生效。其中“分类”动态列表绑定的数据集。

 

示例二:动态列表奇偶行不同颜色

    首先添加2个自定义样式,奇数行样式和偶数行样式。然后在动态样式属性中,分别设置这两个样式的生效条件。其中奇数行样式的生效条件为:默认情景不生效,当“动态列表当前序号 % 2”等于0时生效。其中%表示取余数,由于动态列表当前序号从0开始,即第一行序号为0,第二行序号为1,以此类推。因此说明序号对2取余数为0的是奇数行,为1的就是偶数行。