admin 管理员组文章数量: 1086019
2024年3月19日发(作者：authenticated)
微信小程序wxss设置样式
对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来
一、wxml
界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
一、视图容器(View Container)：
组件名
view
scroll-view
swiper
说明
视图容器
可滚动视图容器
可滑动的视图容器
二、基础内容(Basic Content)
组件名
icon
text
progress
四、操作反馈组件(Interaction)
组件名
action-sheet
modal
progress
toast
五、导航(Navigation)
组件名
navigator
三、表单组件(Form)
组件名
button
form
input
checkbox
radio
picker
slider
switch
label
说明
按钮
表单
输入框
多项选择器
单项选择器
列表选择器
滑动选择器
开关选择器
标签
六、多媒体(Media)
组件名
audio
image
video
说明
音频
图片
视频
七、地图(Map)
组件名
map
八、画布(Canvas)
组件名
canvas
说明
画布
关于这八大类的属性和具体用法可参考以下参考文献链接：
/weixinapp/
/debug/wxadoc/dev/component/
二、wxss
wxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：
1.尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏
幕做为视觉设计标准。
rpx 与 px单位换算如下：
1/6
设备
iPhone5
iPhone6
iPhone6s
rpx换算px (屏幕宽度/750)
1rpx = 0.42px
1rpx = 0.5px
1rpx = 0.552px
px换算rpx (750/屏幕宽度)
1px = 2.34rpx
1px = 2rpx
1px = 1.81rpx
2.样式导入
可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结
束。
例如：
/** **/
.appText{
margin:10px;
}
/** **/
@import "";
.content_text:{
margin:15px;
}
是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对
全局样式中的相同属性会覆盖。
对于微信小程序wxss样式的使用来说，其实大部分都和css样式一致，下面简单的进行介绍一下：
wxss样式属性
一、wxss display(显示)
属性
flex
inline-block
inline
inline-table
inline-flex
none
block
list-item
table
table-caption
table-cell
table-column
table-column-group
table-row
table-row-group
table-header-group
table-footer-group
inherit
说明
多栏多列布局
行内块元素
此元素会被显示为内联元素，元素前后没有换行符
作为内联表格来显示（类似
| 和 | ） 作为一个单元格列显示（类似 作为一个或多个列的分组来显示（类似 作为一个表格行显示（类似 |
|---|
发表评论