🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上)
🐳博客主页:苏凉.py的博客
🌐系列专栏:小程序开发基础教程
👑名言警句:海阔凭鱼跃,天高任鸟飞。
📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!
👉关注✨点赞👍收藏📂
条件渲染
wx:if
在小程序中为了显示不同的信息段,我们可以通过条件渲染来显示,满足条件则显示页面,不满足则隐藏。
配合wx:elif
和wx:else
来使用
语法:
wx:if="{{}}"
实例:
添加三个view
组件
<view>男</view>
<view>女</view>
<view>未知</view>
在js文件中的data中定义一个数据
为wxml中的三个view
组件添加条件渲染语句
<view wx:if="{{gender == 1}}">男</view>
<view wx:elif="{{gender == 2}}">女</view>
<view wx:else>未知</view>
这时在小程序内就只显示条件满足gender为1的view
组件了。
结合block使用wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个block
标签将多个组件包装起来,并在block
标签上使用wx:if 控制属性。
<block wx:if="{{gametype == 1}}">
<view>英雄联盟</view>
<view>QQ飞车</view>
<view>地下城</view>
</block>
<block wx:else="{{gametype == 2}}">
<view>王者荣耀</view>
<view>原神</view>
<view>和平精英</view>
</block>
<block wx:else>
<view>其他</view>
</block>
block
并非是一个组件,而是一个包裹性质的容器,它不会再页面上渲染出来。
hidden隐藏元素
上面我们说了可以用wx:if
来显示和隐藏元素,hidden同样也可以控制显示和隐藏元素。
语法:
hidden=”{{}}“
条件为true则隐藏,否则显示。
<view hidden="{{true}}">苏凉</view>
wx:if 和 hidden的区别
1.运行方式不同
-
wx:if
以动态创建和移除元素的方式,控制元素的展示与隐藏 -
hidden
以切换样式的方式( display: none/block;),控制元素的显示与隐藏
2.何时使用?
- 在我们需要频繁切换显示与隐藏时,建议使用
hidden
- 在我们条件比较复杂时,建议使用
wx:if
配合wx:elif
和wx:else
来使用。
列表渲染
wx:for
通过wx:for
可以根据指定的数组,循环渲染重复的组件结构。
同时使用index来显示当前索引,使用item来显示当前项
实例:
<view wx:for="{{arr1}}">
这是第{{index+1}}个角色,TA是{{item}}。
</view>
index索引项从0开始
手动指定索引和当前项的变量名
- 使用
wx:for-index
可以指定当前循环项的索引的变量名 - 使用
wx:for-item
可以指定当前项的变量名
实例:
<view wx:for="{{arr1}}" wx:for-index="num" wx:for-item="acter">
这是第{{num+1}}个角色,TA是{{acter}}。
</view>
wx:key 的使用
小程序在实现列表渲染时,建议为渲染出来的列表项指定唯一的 key值,从而提高渲染的效率。
实例:
wxml:
<view wx:for="{{arr2}}" wx:key="id">{{item.name}}</view>
js:
如果列表中没有设定key值,那我们也可以将默认的index来作为我们的key值。
wxss模板样式
wxss是什么
wxss (weixin Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。
wxss和css的关系
wXSS 具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。
与CSS相比,WXSS扩展的特性有:
- rpx尺寸单位
- @import样式导入
同时wxss和css都有通用的选择器和通用的样式规则。
rpx单位
rpx ( responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
rpx实现原理
rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)。文章来源:https://www.toymoban.com/news/detail-792534.html
- 在较小的设备上,1rpx所代表的宽度较小
- 在较大的设备上,1rpx所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。文章来源地址https://www.toymoban.com/news/detail-792534.html
到了这里,关于【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!