原生微信小程序踩坑（三）------ 活动类的使用

原创已于 2022-01-21 16:47:08 修改 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2022-01-20 21:46:36 首次发布

前端开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在原生微信小程序中如何实现元素的活动状态切换。由于原生小程序不支持直接使用表达式的方式绑定活动类，因此展示了不同于Vue.js的另一种实现方法。通过条件语句动态设置class属性值，实现样式的变化。

在原生微信小程序中，活动类的使用不能像vue中那样直接**:class="{active:index == ‘1’}**这样来使用的，但是方法上来讲都是一样，原生微信小程序标签上只能出现一个class属性名

<!--vue的活动类的使用-->
<div class="test1" :class="{active:index == "div"}">
    这里是测试
</div>

<!--原生小程序活动类的使用-->
<view class="test1 {{index == 'view'?'active':''}}">
	这里是测试
</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

“蓬蒿人”

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

2024年Unity 面试题 |五萬字二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】

努力前行，总会成为自己心中的那道光

02-23

16万+

正所谓金三银四，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！

小程序active功能

qq_38822390的博客

01-21

3686

目标需求：实现下图，给点击的view增加类，每次只能选择一个。主要思路：给点击的view增加类，依靠点击的index对state进行赋值。如果相同时，给该view增加类。效果演示： wxml <view class="iconusecont-div {{state==index?'active-tag':''}}" bindtap="select_use" wx:for...

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

原生小程序学习笔记

小松鼠的博客

01-16

674

本人为后端开发人员，本篇笔记是本人第一次学习微信小程序笔记，适合基础知识薄弱的新手观看，各位前端大神可忽略！

微信小程序实现 item点击变色的多种方式

前端必备小窝

11-04

1483

思路1：for循环渲染item给点击的元素添加active标签多个元素使用wxs语法判断 active标签数组中是否存在点击的index思路2：如果只允许同时只存在一个元素变色就不需要使用wxs 直接把{{utility.isActive(salaryState,index)}}改为{{state==index？思路3：如果在2的基础上只需要短暂变色使用微信：hover语法即可。

:class的使用及通过:class实现标签切换状态改变

米拉

06-25

5191

做一个点击标签切换的功能，效果如下： JS：当然也可以酱紫写： JS：二、点击标签加载相应标签的内容： HTML： CSS： JS：三、三状态切换：一般用于可选/不可选/选中三种情况: Css: JS: 四、更多状态结合： HTML： CSS： JS：附：:class的使用(官方文档) 1、:class="变量名"，一般是直接绑定一个类名2、:class = "{ 类名:布尔值 }"

原生微信小程序踩坑（一）------页面空白不显示问题

challenge_study的博客

01-18

3896

最近在做一个原生的微信小程序，由于之前也没有做过原生微信小程序的开发，遇到了许多问题，有复杂的，也有难度高一些的，为了对这些问题做一些记录方便以后的查询。遇到的第一个问题就是在.wsml中写入了标签，并且在.wxss中也写好了样式，但是编译运行后在页面上没有显示出任何东西来，几经折腾后发现如果在.js文件中写入了Page({})就会正常显示了，跟正常的html或则vue是不同的。 //无论你当前的代码中有没有逻辑处理都要写下这行代码，否则是无法正常显示的 //这里是微信小程序的.js文件中 Page({

学习微信小程序的资料汇总---转载自知乎

weixin_41670928的博客

05-07

5761

作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。微信小程序正式公测，张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ...前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S；1：官方工具：https://mp.weix...

2025最新面试自用题库---面试使用

weixin_55846296的博客

02-20

1596

你会什么，你擅长什么，你有哪些不足，如何与客户去沟通，当需求频繁变更，你如何处理，当你感觉客户需求不对的时候该怎么办当你工作出错你该怎么办，有没有带过团队，能不能带团队，你之前项目多少人，你负责什人…注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。响应式是什么，原理是什么，有哪些副作用有没有接触过因为响应式出现的的bug，业务场景，怎么解决的。怎么处理大规模的并发，你之前项目中有遇到吗，讲讲场景，怎么解决的。

谷粒商城 - 个人笔记(基础篇一)

热门推荐

知行

09-26

7万+

电商后台管理系统+电商系统，掌握微服务的全套方案。该系统有商品服务、仓储服务、订单服务、购物车服务、检索服务、认证中心服务、网关服务、用户服务、秒杀服务、第三方服务。使用SpringBoot+SpringCloud并配套SpringCloud Alibaba系列，引入全套微服务治理方案：Nacos注册中心/配置中心、Feign远程调用、Gateway网关、Redisson缓存、基于ElasticSearch7全文检索、异步编排与线程池、RabbitMQ柔性事务方案、Redisson分布式锁、分布式信号量等。

微信支付 postman_小刘同学微信支付接入全笔记

weixin_39934675的博客

11-20

1475

走上“码农”这条路已经快一年半啦，做过不少的Demo和项目，也接触了不少的业务场景，8000w的大数据量处理，QPS500+的并发优化，也算是在开发的这条路上踏出了入门向前的步伐；不过，每个人所处的公司不同，所面对的业务不同，大家逐渐都开始有了自己所擅长处理的业务类型，我也不例外，在经历了疫情期间的跳槽之后，我又开始涉足一个全新的业务领域，而我面对的第一个挑战就是---支付！...

低代码选谁不踩坑？JNPF 剖开技术内核：BPMN 深度 + 代码扩展，国内平台多是 “半吊子”？

sdgfafg_25的博客

09-24

847

低代码（Low-Code Development Platform, LCDP），并非仅仅意味着减少代码编写量，其本质是通过可视化建模、自动化代码生成等一系列先进技术，实现快速应用开发的技术体系。这一体系的核心特征，可高度概括为 “80% 配置 + 20% 代码” 的混合开发模式。所谓 “80% 配置”，指的是通过可视化建模的方式，完成大部分通用功能的开发。用户只需在可视化界面中，通过简单的拖拽表单元素、编排流程节点、配置数据模型等操作，就能快速搭建出诸如表单设计、流程审批、数据报表等常见功能模块。以。

SpringCloudAlibaba注册中心与配置中心之利器Nacos实战与源码分析（上）

「虚幻私塾」

04-10

952

Python微信订餐小程序课程视频 https://blog.youkuaiyun.com/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.youkuaiyun.com/m0_56069948/article/details/122285941 概述背景 Nacos GitHub源码地址 https://github.com/alibaba/nacos ，目前源码基于高性能RPC的2.1.0,和基于HTTP RESTFUL的1.4.3版本的

一位平凡人的春招面经汇总（前端）21届

weixin_42282727的博客

03-31

1396

地平线前端一面南京（1h）3.2 笔试题（20min）第一题 function test(a) { a = 3 } var a = 4 test(a) console.log(a) // 4, 3，变量提升第二题，下列执行结果，以及原理，第二个输出和第三个输出有什么不同 var o = { user:'aaa', fn:function() { console.log(this.user); } } o.fn() window.o.fn() var c = o.fn c() //

【微信小程序】原生小程序-新手注意事项

weixin_44899940的博客

06-21

1246

【微信小程序】原生小程序-新手注意事项

微信小程序黑马优购（项目）（一）

dengfengling999的博客

11-22

345

目录：1.配置uni-app的开发环境2.初始化uni-app项目3.代码管理。

【开题答辩全过程】以基于微信小程序的糖尿病居家健康管理系统为例，包含答辩的问题和答案

shiji9932的博客

11-23

875

本文介绍了一个基于微信小程序的糖尿病居家健康管理系统毕业设计方案。系统分为小程序端和后台管理端，采用微信小程序原生框架+SpringBoot+MySQL技术栈，实现血糖记录、在线咨询、健康建议等功能。该系统针对糖尿病患者需求设计，具有免安装、易推广等特点，通过用户、专家、管理员三种角色实现分级管理。在答辩过程中，评委对技术选型、功能设计、创新性等方面进行了质询，学生从实用性、微信生态优势等角度进行了回应。最后评委肯定了选题价值和技术可行性，同时建议加强技术细节掌握和创新功能开发。该案例为毕业设计开题提

50036_基于微信小程序的智能点餐推荐系统

tangyuzhidao的博客

11-20

413

本文设计并实现了一个外卖点餐小程序，融合了传统的餐饮外卖管理与计算机技术，实现外卖业务的高效科学管理，对于商家而言佣金付出较少，经营成本有所改善，使其服务和管理得到实质性的提升，提高品牌形象和行业核心竞争力。而用户则利用微信小程序进行点餐，无需安装占据手机内存，也较为方便快捷。本课题是针对外卖点餐小程序的设计，该外卖点餐小程序实现了一个外卖点餐终端的功能，如：外卖点餐、菜品管理、订单管理、评价管理及统计分析等。

微信小程序黑马优购（项目）（三）