基础语法1

wxss与css的比较

样式rpx

• rpx是可以根据屏幕自适应的单位

view{
  width: 200rpx;
  height: 200rpx;
  background-color: aqua;
}

样式引入

• 通过@import引入
• 引入的路径必须是相对路径

@import "../../styles/common.wxss"

选择器

• 选择器与css基本一样，区别在于wxss不支持通配符*，因此以下代码无效

/*
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
*/

常见标签

text

• text类似于web中的span，text中存在一些属性

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

<text decode selectable>
  你&nbsp;好
</text>

image

• 图片标签

属性名	默认值	说明
mode	'scrollToFill'	图片裁剪、缩放的模式
lazy-load	false	图片懒加载

• mode有效值

模式	值	说明
缩放	scrollToFill	不保持纵横比，使图片完全拉伸至填满image元素
缩放	aspectFit	保持纵横比，使图片长边完全显示
缩放	aspectFill	保持纵横比，使图片短边完全显示
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top/bottom/center/left/right/top left/	不缩放图片，分别只显示顶部/底部/中间/左侧/右侧/左上区域

// 小程序中，默认实现了图片懒加载
<image src="https://s3.ax1x.com/2021/01/20/sWoAUg.md.jpg" lazy-load mode="aspectFit"></image>

block

• block标签使得列表渲染时横向分布，中间以空格分隔

<view>
  <block wx:for="{{anime}}" wx:key="index">
    名称：{{item}}
  </block>
</view>

icon

• 图标标签，小程序中已内置多种图标样式

属性	类型	说明
type	string	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	icon的大小
color	string	icon的颜色，同css的color

<icon type="success" size="23" color="#0094ff"></icon>

swiper

• 轮播图标签
• 轮播图标签需配合<swper-item>一起使用
• swiper常见属性：

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
current	number	0	当前所在滑块的 index
interval	number	5000	自动切换时间间隔
duration	number	500	滑动动画时长
circular	boolean	false	是否采用衔接滑动

<swiper autoplay interval="2000" circular indicator-dots indicator-color="white" indicator-active-color="#0094ff">
  <swiper-item>
    <image src="https://s3.ax1x.com/2021/01/20/sWoAUg.md.jpg" mode="aspectfit"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://s3.ax1x.com/2021/01/20/sWoCKP.md.jpg" mode="aspectfit"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://s3.ax1x.com/2021/01/20/sWIxCd.md.jpg" mode="aspectfit"></image>
  </swiper-item>
</swiper>

navigator

• 导航标签

属性	默认值	说明
target	self	在哪个目标上发生跳转，默认当前小程序。值为miniProfram时，在其他小程序跳转
url		当前小程序内的跳转链接
open-type	navigate	跳转方式

• open-type 的合法值

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
switchTab	跳转到tabbar页面，并关闭所有的非tabbar页面
reLaunch	关闭所有页面，打开应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面
exit	退出小程序，target="miniProgram"时生效

<navigator url="../demo5/demo5" open-type="navigate"> 轮播图页面 </navigator>
<navigator url="../demo5/demo5" open-type="redirect"> redirect页面 </navigator>
<navigator url="../index/index" open-type="switchTab"> tabbar页面 </navigator>
<navigator url="../demo3/demo3" open-type="reLaunch"> 关闭所有其他页面 </navigator>

rich-text

• 富文本标签，可以将字符串解析成对应标签，类似于vue中的v-html
  • 通过nodes属性来实现
    • 接收标签字符串
    • 接收对象数组（不推荐）

<rich-text nodes="{{html}}"</rich-text>

data: {
  html:'<div style="border: 1px solid black; width: 360px; height: 360px;">你好</div>'
}