wxss与css的比较
样式rpx
view{
width: 200rpx;
height: 200rpx;
background-color: aqua;
}
样式引入
@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>
你 好
</text>
image
属性名 |
默认值 |
说明 |
mode |
'scrollToFill' |
图片裁剪、缩放的模式 |
lazy-load |
false |
图片懒加载 |
模式 |
值 |
说明 |
缩放 |
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>
![九种原生样式](https://img.imgdb.cn/item/601508113ffa7d37b3ce7619.png)
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 |
跳转方式 |
值 |
说明 |
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
<rich-text nodes="{{html}}"</rich-text>
data: {
html:'<div style="border: 1px solid black; width: 360px; height: 360px;">你好</div>'
}