小程序-wx:if跟hidden

本文探讨了在微信小程序中wx:if与hidden指令的区别,特别是在元素为flex布局时hidden可能遇到的问题。建议避免在使用hidden时应用flex布局。

wx:if跟hidden都是控制显示隐藏;具体区别,用谁更合适 官方文档

主要说使用hidden,在项目中发现hidden有的时候使用起来,挂了,不起效果,后来查了下,发现是元素不是block布局,使用了flex!不要使用flex就可以了!

<view class="content-item-info"> <view class="content-item-text-name"> <view class="content-item-text-names">{{item.name}}</view> <view class="content-item-text-id">({{item.no}})</view> </view> <text class="content-item-text-tag" wx:for="{{item.positions}}" wx:for-item='position' wx:key="index" wx:if="{{index === 0}}">{{position.name}}<text wx:if="{{item.positions.length > 1}}">...</text></text> <view wx:if="{{item.verified == 2 || item.verified == '2'}}" class="status-tag status-verified">{{verifiedDict[item.verified]}}</view> <view wx:elif="{{item.verified == 7 || item.verified == '7'}}" class="status-tag status-graduated">{{verifiedDict[item.verified]}}</view> <view wx:else class="status-tag status-other">{{verifiedDict[item.verified]}}</view> </view>.content-item { background: #fff; border-top-style: solid; border-bottom-style: solid; border-width: 8rpx; border-color: #f2f2f2; height: 150rpx; display: flex; align-items: center; /* justify-content: space-between; */ } .content-item-text { width: calc(100% - 80rpx); padding-left: 20rpx; padding-right: 20rpx; } .content-item-info { display: flex; align-items: center; margin-bottom: 10rpx; } .content-item-img { height: 80rpx; width: 80rpx; margin-left: 30rpx; border-radius: 50%; /* 使图片变为圆形 */ overflow: hidden; /* 确保图片不会超出容器 */ } .content-item-text-name { /* display: block; */ font-size: 30rpx; font-weight: bold; color: rgba(0, 0, 0, 0.65); } content-item-text-names { float: left; } content-item-text-id { float: left; } .content-item-text-tag { display: block; font-size: 24rpx; color: #3391f5; padding: 4rpx 16rpx; margin-left: 14rpx; background: #c6e2ff; } .status-tag { margin-left: auto; font-size: 24rpx; padding: 4rpx 15rpx; border-radius: 20rpx; color: #4ea5ff; } .status-verified { background-color: #ecf5ff; } .status-graduated { background-color: #fdf6ec; color:#ecb66f; } .status-other { /* background-color: #c3cbd3; */ background-color: #f4f4f5; color:#909399; } .content-item-text-class { font-size: 26rpx; color: rgba(0, 0, 0, 0.45); }我现在改成这样了左边姓名学号列的分成两个盒子放在一个盒子里去了,我现在想要名字短的话就让名字和学号一行显示,像我图片第一个用户就是名字长了,就想现在这样姓名和学号换行显示
12-11
基于实时迭代的数值鲁棒NMPC双模稳定预测模型(Matlab代码实现)内容概要:本文介绍了基于实时迭代的数值鲁棒非线性模型预测控制(NMPC)双模稳定预测模型的研究与Matlab代码实现,重点在于提升系统在存在不确定性与扰动情况下的控制性能与稳定性。该模型结合实时迭代优化机制,增强了传统NMPC的数值鲁棒性,并通过双模控制策略兼顾动态响应与稳态精度,适用于复杂非线性系统的预测控制问题。文中还列举了多个相关技术方向的应用案例,涵盖电力系统、路径规划、信号处理、机器学习等多个领域,展示了该方法的广泛适用性与工程价值。; 适合人群:具备一定控制理论基础和Matlab编程能力,从事自动化、电气工程、智能制造、机器人控制等领域研究的研究生、科研人员及工程技术人员。; 使用场景及目标:①应用于非线性系统的高性能预测控制设计,如电力系统调度、无人机控制、机器人轨迹跟踪等;②解决存在模型不确定性、外部扰动下的系统稳定控制问题;③通过Matlab仿真验证控制算法的有效性与鲁棒性,支撑科研论文复现与工程原型开发。; 阅读建议:建议读者结合提供的Matlab代码进行实践,重点关注NMPC的实时迭代机制与双模切换逻辑的设计细节,同时参考文中列举的相关研究方向拓展应用场景,强化对数值鲁棒性与系统稳定性之间平衡的理解。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值