赞
踩
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
与 CSS 相比,WXSS 扩展的特性有:单位尺寸和样式导入
<text style="background-color: aqua;font-size: 20px;">内联样式</text>
写在.wxss文件中
- .wxsstest01{
- height: 30px;
- width: 200px;
- background-color: rgba(146, 146, 236, 0.692);
- font-size: 30px;
- }
全局样式写在app.wxss中,这其中的样式在全局的页面中都是可以直接使用的,而对于组件来说是应用不了的
内联>页内>全局;
可以通过!important来提升优先级
使用@import可以导入其他wxss样式文件
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
wxss中的flex布局与css的flex布局相同,可以往前翻看CSS中的flex布局来进行学习
在使用样式基础库时,需要将页面结构、页面样式(style中)、页面逻辑都复制过来
应用组件要在.json文件中声明组件路径.
在微信的官方文件中可以看到更加详细的组件内容
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>
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>
蓝色部分被选中
mode的合法值
直接使用src来导入本地图片
type的有效值只能为:
success, success_no_circle, info, warn, waiting, cancel, download, search, clear
通过color可以直接更换图标的颜色
button组件一般用于接收用户点击来执行不同逻辑
button的属性:
①size属性值为default默认大小和mini小尺寸大小
②type属性为按钮的样式,属性值为default白色,primary绿色,warn红色三种颜色3
③plain属性表示镂空效果,下图中下面为镂空效果
④loading属性会在按钮前出现加载样式的图标
⑤from-type用于from组件,点击分别会触发form组件的 submit(提交表单)/reset(重置表单) 事件
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>
在.js文件中使用wx.navigateTo({url:'UUURRRLLL'})实现页面的跳转,跳转后,在跳转页面中可以获取到跳转时所点击对象的属性值。
- _handleTap:function(){
- wx.navigateTo({
- url: '/page/1-view/1-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轴方向分开考虑)
.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
- },
-
- })

达到滑动一定程度自动滑开和闭合的效果
是一个可滚动的试图区域
基本属性:
- <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
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。