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 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标签后才会显示内容。
下面代码是一段简单的轮播图,WXSS代码不单独放出来了,直接使用下面代码图片会被拉伸,属性默认值为true时,可以不写{{true}}。
通过对image标签绑定点击事件就可以实现点击图片时的跳转效果
<swiper class="lbt"
indicator-dots="{{true}}"
indicator-color="white"
indicator-active-color="blue"
autoplay="{{true}}"
interval="3000"
circular>
<swiper-item>
<image src="https://i0.hdslb.com/bfs/archive/a721e4d6ef86068e31fab0d8c0dc2ec1908ab736.jpg@672w_378h_1c.webp" class="image"></image>
</swiper-item>
<swiper-item>
<image src="https://i2.hdslb.com/bfs/archive/66ad8314d4fa30cc0d44bcfe5fbba0ab2f4ffcdc.jpg@672w_378h_1c.webp" class="image"></image>
</swiper-item>
</swiper>
轮播图效果
6.6.1跳转效果:
在.js文件中使用wx.navigateTo({url:'UUURRRLLL'})实现页面的跳转,跳转后,在跳转页面中可以获取到跳转时所点击对象的属性值。
_handleTap:function(){
wx.navigateTo({
url: '/page/1-view/1-view',
})
},
6.7movable-area + movable-view
是可移动的视图容器,在页面中可以拖拽滑动。movable-view必须在 movable-area组件中,并且必须是直接子节点,否则不能移动。movable-area是movable-view的可移动区域
基本属性
direction(移动方向)、inertia(是否有惯性)、friction(摩擦系数)
<movable-area class="ma">
<movable-view class="mv" direction="all"></movable-view>
</movable-area>
当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;
当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)
6.7.1样例
.wxml
<view class="cell">
<movable-area class="ma">
<movable-view class="mv" direction="horizontal" x="{{isOpen?'-100rpx':'0'}}" bindtouchstart="_handleStart" bindtouchend="_handleEnd">滑动删除</movable-view>
</movable-area>
<button class="del" type="warn">删除</button>
</view>
.js
let lastTouch = 0;
Page({
_handleStart:function(evt){
lastTouch = evt.changedTouches[0].pageX
},
_handleEnd:function(evt){
let newTouch = evt.changedTouches[0].pageX
let cha = newTouch - lastTouch;
if(cha < -20){
this.setData({
isOpen:true
})
}
else if(cha > 20){
this.setData({
isOpen:false
})
}
else{
this.setData({
isOpen:this.data.isOpen
})
}
},
/**
* 页面的初始数据
*/
data: {
isOpen:false
},
})
达到滑动一定程度自动滑开和闭合的效果
6.8scroll-view
是一个可滚动的试图区域
基本属性:
<scroll-view class="sv"
scroll-x
scroll-y
scroll-top="100px"
scroll-left="100px ">
<image src="https://i1.hdslb.com/bfs/archive/ad6e142961a272bcde1d92afbf5e0371a88f15c9.jpg@672w_378h_1c.webp"></image>
</scroll-view>
<scroll-view class="sv" scroll-y scroll-into-view="to3">
<button>1</button>
<button>2</button>
<button id="to3">3</button>
<button>4</button>
<button>5</button>
<button>6</button>
</scroll-view>
七、自定义组件
将整个app的各个页面分解成一个个组件的开发称为组件化,组件化能够便于我们重用各个组件,也便于我们维护开发
在自定义组件的.js文件中 :
properties 是组件的属性列表,是外部传给内部的数据,定义时要定义类型和默认值
eg.
properties: {
segementItems:{
type: Array,
value: []
}
},
methods是组件的方法列表,组件所用到的处理函数都写在里面
eg.
methods: {
_handlerTap:function(evt){
let cid = evt.currentTarget.id
this.setData({
currentIndex: cid
})
//触发一个自定义事件,并且把数据传递出去
this.triggerEvent("selectChange",{currentIdx: cid},{})
}
}
外部在引用组件的时候需要现在.json文件中声明组件的引用eg.
{
"usingComponents": {
"segementBar(引用组件名)":"/compenent/segementBar/segementBar(组件路径)"
}
}
组件的样式于外部一般来说是分离开的,在外部定义的组件样式不会对组件的样式进行修改
slot标签(插槽):
slot标签用在组件内部,为外部在组件内部添加的标签预留位置,设置插槽可以直接在外部对组件内部的内容进行修改,省去传递数值的麻烦。
默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,可以在组件 js 中声明启用。
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
此时,可以在这个组件的 wxml 中使用多个 slot ,以不同的 name
来区分。
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
使用时,用 slot
属性来将节点插入到不同的 slot 上。
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view