【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

这篇具有很好参考价值的文章主要介绍了【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上)
🐳博客主页:苏凉.py的博客
🌐系列专栏:小程序开发基础教程
👑名言警句:海阔凭鱼跃,天高任鸟飞。
📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!
👉关注✨点赞👍收藏📂

条件渲染

wx:if

在小程序中为了显示不同的信息段,我们可以通过条件渲染来显示,满足条件则显示页面,不满足则隐藏。
配合wx:elifwx:else来使用

语法:wx:if="{{}}"

实例:
添加三个view组件

<view></view>
<view></view>
<view>未知</view>

在js文件中的data中定义一个数据
小程序 wx:if css,微信小程序,微信小程序,小程序
为wxml中的三个view组件添加条件渲染语句

<view wx:if="{{gender == 1}}"></view>
<view wx:elif="{{gender == 2}}"></view>
<view wx:else>未知</view>

这时在小程序内就只显示条件满足gender为1的view组件了。
小程序 wx:if css,微信小程序,微信小程序,小程序

结合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>

小程序 wx:if css,微信小程序,微信小程序,小程序
block并非是一个组件,而是一个包裹性质的容器,它不会再页面上渲染出来。

hidden隐藏元素

上面我们说了可以用wx:if来显示和隐藏元素,hidden同样也可以控制显示和隐藏元素。

语法:hidden=”{{}}“条件为true则隐藏,否则显示。

<view hidden="{{true}}">苏凉</view>

wx:if 和 hidden的区别

1.运行方式不同

  • wx:if动态创建和移除元素的方式,控制元素的展示与隐藏
  • hidden切换样式的方式( display: none/block;),控制元素的显示与隐藏
    小程序 wx:if css,微信小程序,微信小程序,小程序

2.何时使用?

  • 在我们需要频繁切换显示与隐藏时,建议使用hidden
  • 在我们条件比较复杂时,建议使用wx:if配合wx:elifwx:else来使用。

列表渲染

wx:for

通过wx:for可以根据指定的数组,循环渲染重复的组件结构。
同时使用index来显示当前索引,使用item来显示当前项

实例:

<view wx:for="{{arr1}}">
这是第{{index+1}}个角色,TA是{{item}}。
</view>

小程序 wx:if css,微信小程序,微信小程序,小程序

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:
小程序 wx:if css,微信小程序,微信小程序,小程序
如果列表中没有设定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)。

  • 在较小的设备上,1rpx所代表的宽度较小
  • 在较大的设备上,1rpx所代表的宽度较大

小程序在不同设备上运行的时候,会自动把 rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配文章来源地址https://www.toymoban.com/news/detail-792534.html

到了这里,关于【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】列表渲染wx:for

    🏆今日学习目标:第十二期——列表渲染wx:for 😃创作者:颜颜yan_ ✨个人主页:颜颜yan_的个人主页 ⏰预计时间:20分钟 🎉专栏系列:我的第一个微信小程序 哈喽大家好,本期是微信小程序专栏第十二期,本期我们将学习列表渲染wx:for。 注意:每期内容是连载呢,建议大家

    2024年02月08日
    浏览(50)
  • 【微信小程序】一文带你搞懂小程序的页面配置和网络数据请求

    每个小程序页面都有一个 .json 文件,该文件用来对小程序的页面进行配置。 小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置。 小程序中,app.json中的 window 节点,可以全局配置小程序中 每个页面 的窗口表现。 如:当在app.js

    2024年02月02日
    浏览(42)
  • 微信小程序开发---条件渲染和列表渲染

    目录 一、条件渲染 (1)基本使用  (2)block (3)hidden 二、列表渲染 (1)基本使用 (2)手动指定索引和当前项的变量名 (3)wx:key的使用 条件渲染就相当于if语句,这也不需要多说了,终点是它的用法。 如果想要一次性控制多个组件的展示和隐藏,可以使用block标签将多

    2024年02月09日
    浏览(50)
  • 【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月05日
    浏览(42)
  • 微信小程序和 Vue 中的遍历循环和列表渲染有一些区别。

    在微信小程序中,我们可以使用 wx:for 指令来进行遍历循环,例如: 这里的 items 是一个数组,wx:for 指令会遍历这个数组,并将数组中的每个元素赋值给 item 变量,然后在模板中使用 {{item}} 来显示每个元素的值。wx:key 属性用于指定每个元素的唯一标识符,以便在更新列表时能

    2024年02月09日
    浏览(36)
  • 【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月12日
    浏览(39)
  • 微信小程序之WXML 模板语法之数据绑定、事件绑定、wx:if和列表渲染

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月22日
    浏览(55)
  • 微信小程序:uni-app列表数据渲染子组件修改数据sync/v-model无效的问题

    有如下一个列表,将数据循环传递给子组件,实现业务解耦,组件拆分 Vue的正常逻辑是,父组件和子组件的数据传递的是一个对象,属于引用传递,可以直接在子组件中修改数据,父组件中也会变化,它们操作的是同一个数据。 uni-app子组件中修改 H5正常,转为微信小程序后

    2024年02月10日
    浏览(55)
  • 微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月11日
    浏览(59)
  • 微信小程序的条件判断wx:if、wx:elif以及for循环wx:for

    微信小程序中的条件判断与vue的v-if、v-else语法相似,其语法格式为: 直接实战: 官方文档是这么定义的: **重点1:默认数组当前项的变量名为:item;默认数组当前项的下标变量名为index; **重点2:如果不想使用默认的名:按照以下操作自定义变量名 本人习惯使用默认,实

    2024年02月14日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包