计算机网络/计算机科学与应用/系统/运维/开发

微信小程序-视图层wxml/条件渲染/模板/wxss/内联样式/选择器

1、响应式数据绑定

this.setData()方法

image.png


视图层中显示数据:

image.png

image.png


2、wx:for列表循环

image.png

image.png

wx:key 指定列表中项目的唯一标识符

对于静态列表,建议定义wx:key="*this",否则会给出warning提示


3、条件判断

image.png

image.png


wx:if 条件判断

image.png


block  wx:if 数据绑定控制多个组件

image.png


4、模板

image.png

image.png


模板传递参数:

image.png

image.png

定义模板时,使用name属性作为模板的名字,使用模板时,先使用is属性声明所需使用的模板,然后将模板所需的data传入


wxss 样式语言,自定义单位rpx 

小程序规定屏幕宽度为750rpx  以iphone6为标准 屏幕宽度为375px 共750物理像素

750rpx = 375px = 750个物理像素,即1rpx = 0.5px = 1个物理像素


样式导入

image.png

引入外部wxss样式表

image.png


内联样式3种方式:

image.png

image.png


选择器:

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

image.png


只有惜缘,才有缘分;只有惜友,才有友谊。

评论

^