微信小程序 —— 动态决定页面元素显示或隐藏的技巧

最新推荐文章于 2022-11-01 18:11:32 发布

转载最新推荐文章于 2022-11-01 18:11:32 发布 · 664 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/azhqiang/p/9634340.html

本文介绍了微信小程序中实现元素显示与隐藏的两种方法：一种是通过设置元素的class属性来控制显示状态；另一种更简便的方法是使用wx:if条件渲染特性。这两种方式都能根据后台传来的is_open值动态调整元素的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信小程序开发中，经常遇到一些由后台控制显示（is_open : 1）或者隐藏（is_open : 0），有俩种办法：

复杂办法
- 1.先在元素的class中 class=’{{show?’true’:’hidden’}}’
- 2.再在相对应的js中配置show的值，例 data: {show:1,}
- 3.最后在相对应的css中定义
- .hidden{display:none;}

简单办法

直接在元素中加入wx:if=”{{is_open !=”}}”代码，后台传到前端的is_open为1时，元素就显示；为0时就不显示，如：

<button wx:if="{{show !=''}}" class="free-contactButton" open-type='contact'>
    <view class="iconfont icon-duihuaxinxi"></view>
</button>

转载于:https://www.cnblogs.com/azhqiang/p/9634340.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30340775

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序多选取值判断显示内容

Xinacridine的博客

10-23

1241

写微信小程序项目的时候遇到多选框选值通过id来判断内容切换这里是通过wxs来实现的 wxml <wxs module="calc"> function getId(arr, id) { return arr.indexOf(id) } module.exports = { getId: getId, } </wxs> <view class="lb1"> <view class="lb2">

微信小程序根据后台状态来控制元素隐藏或显示，给遍历的消息列表未读条目显示小红点

qq_36341910的博客

04-26

5181

遍历消息列表未读条目显示小红点前言实现步骤总结前言作为一个从来没接触过小程序的菜鸟，上手一个小程序就是第一次独立开发微信小程序，各种东西不大熟悉，踩了很多坑。不禁纳闷，我明明可以靠颜值吃饭，为什么还得靠实力，咳咳，废话少说，现在有一个需求，就是要在动态渲染出来的消息列表中，给每一条未读消息添加小红点，点击阅读后小红点消失，然后再返回消息页面后，点击过的消息的小红点消失。所谓菜鸟程序员自然是...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序动态显示一段html,微信小程序 实现动态显示和隐藏某个控件

weixin_39800062的博客

06-03

570

微信小程序 实现动态显示和隐藏某个控件发布时间：2020-08-23 11:37:13来源：脚本之家阅读：152作者：lqh微信小程序实现动态显示和隐藏某个控件在小程序的开发过程中，经常需要用到隐藏某个控件这种情况。因为项目原本是需要将两个canvas切换，但是小程序的canvas支持的功能实在是少，本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果，但是都不支持...

玩转微信小程序 实战高仿B站小程序

08-10

【为什么学习微信小程序？】 小程序开发为当下一种主流的开发形式，小程序开发已经不仅仅局限于互联网行业，传统行业同样也有海量的需求，掌握小程序开发不仅仅是掌握了一个新的开发技能，更可以增加大家的行业竞争力，无论是在岗位的提升，求职面试、或者个人创业都是有很大的帮助。掌握了小程序开发小程序也是一门相对比较容易上手的技术，因为小程序开发容纳了前端、后端、运维等岗位所需掌握的知识但又极为简单好理解，对于刚刚入门或者小白用户是一个可以快速掌握并成为一名程序猿的不二途径。【推荐你学习这门课程的四大亮点】 1、完整成体系的小程序开发知识：对于没有学习过小程序开发的同学，本课程由浅入深系统的向同学们讲解了小程序开发知识，将知识点串联起来，让同学们可以更好更快的掌握小程序开发。2、视频及相关功能开发的掌握：借助于小程序开发使得视频方向的开发变的尤为简单，即使你是入门小白也可以熟练掌握小程序中视频的相关开发，其中涉及了视频的常规控制如播放暂停等也有比较流行的视频弹幕功能，并结合了一下视频开发中相关的性能优化问题，可以让同学们通过本课程的学习对于视频类的开发有更深层次的认识。3、打造智能闲聊小程序：借助于网络上开放的人工智能接口，去实现智能闲聊功能，使得开发的过程不仅能够收获更多的知识也变得更加有趣。项目中虽然知识讲解了智能闲聊功能的调用，但是通过此功能的调用方法大家可以举一反三去使用更多的开发功能使得开发变得简单且有趣。4、掌握项目级开发知识及技巧：本课程中融入了两大当前比较主流的项目实例，视频功能和人工智能。通过项目的练习不仅可以让大家掌握较为主流的项目方向且融入很多的中高级语法及项目开发知识，如ES6+的一些语法和模块化、组件化开发的知识。【课程内容设计】设计本门课程时考虑到很多同学可能没有小程序开发相关经验，本门课程将由浅入深，渐进式的讲解知识点。我把课程分为了三个阶段分别为：初次接触、基础入门、实战提升。 1、初次接触：主要给大家讲解小程序开发的相关知识，让大家在宏观上对向程序开发能有一定的概念。并且讲授的开发环境的搭建让大家对在开发前期做一个充分的热身。先激发起大家对线程序开发的热情，这样为下一步小程序的开发学习做一个铺垫。 2、基础入门：这个阶段主要为入门的同学提供了一个比较全面的小程序开发基础知识知识汇总，并伴有实践的例子简单且易上手，让大家能够体验到小程序的开发乐趣，并未下一步的项目实战开发打定基础。 3、实战提升：这个阶段为项目实践阶段，通过实战项目让大家深入了解和学习小程序开发，项目中同时融入了现在主流的视频内容，和有趣并贴近生活的智能闲聊功能，项目中涉及到的技术点也是由浅入深，同学们在掌握小程序的开发能力的同时也掌握了问题解决与深入学习的能力。【实战项目展示】【学习完课程你将收获】

微信小程序——简单计算器

01-29

此外，微信小程序还提供了`Page`和`App`生命周期函数，如`onLoad`、`onShow`、`onHide`等，用于在页面加载、显示或隐藏时执行特定操作。在本例中，可能需要在页面加载时初始化计算器的状态。总的来说，这个"简单...

微信小程序——基本语法

沐小侠

07-19

3540

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

微信小程序-婚礼邀请函源码

04-24

总的来说，"微信小程序-婚礼邀请函源码"是一个实践性的学习资源，它涵盖了小程序开发的基础知识和实战技巧。通过分析和修改这个项目，初学者能够快速掌握小程序开发的基本流程，同时也能了解到如何利用小程序为特定...

微信小程序登录页面设计（小程序项目）