小程序动态改变样式class

最新推荐文章于 2024-04-30 09:31:09 发布

原创最新推荐文章于 2024-04-30 09:31:09 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3

问题同时被 2 个专栏收录

11 篇文章

订阅专栏

小程序

7 篇文章

订阅专栏

本文介绍了在小程序中如何根据条件动态地改变元素的样式class，通过使用模板语法{{}}进行条件判断，实现`sborder`类的切换。

问题

小程序中动态改变样式class

解决

直接在{{}}里做判断，{{cindex==index? ‘sborder’:’’}}

<view class="sitem {{cindex==index? 'sborder':''}}" wx:for="{{list}}" 
wx:key="index" data-index="{{index}}" bindtap="changeIndex">
	{{item.name}}
</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

v_loading

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序点击移除添加class（点击改变背景颜色和字体颜色）

03-29

微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 !--页面-- v ... 微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 (此图片来源于网络，如有侵权，请联系删除! ) <view cl

微信小程序 JS动态修改样式的实现方法

10-17

当需要动态改变样式时，我们可以利用JS（逻辑层）来操作数据，并通过`this.setData()`方法更新界面。以下是一个简单的例子，展示了如何通过JS动态修改view元素的背景颜色： ```html  <view ...

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

微信小程序动态选择class改变样式

weixin_42017221的博客

11-03

814

【代码】微信小程序动态选择class改变样式。

小程序下标动态改变class 并且动态改变切换标题

weixin_43886375的博客

07-13

288

wxml页面  <view class="flex justify-around align-center margin-top-sm"> <view wx:for="{{bill}}" wx:key="index"> <view class="bill {{idx==index?'active':''}}" bindtap="billIndex" data-index="{{index}}">{{item}}</vi

小程序——用class类来动态切换样式

baijian10的博客

03-12

1068

关联数据，当课程为必修课时，显示出必修的标签并且下划线为红线，否则不显示标签且下划线为黄色在课程名称的组件里面插一个text组件，并用wx:if="{{isShow}}"来控制必修组件的显示与否； <text>课程名称<text class="data" wx:if="{{isShow}}">必修</text></text> 在js文件的data...

微信小程序class动态绑定

yangmin_kk的博客

04-30

6364

示例是除最后一条都加下划线并且除第一条给padding-top:10。(最外层要加上"[]"，不然不生效)示例是除最后一条都加下划线（微信小程序使用动态class前面不需要冒号）

微信小程序点击view动态添加样式过程解析

10-15

微信小程序点击view动态添加样式主要涉及微信小程序的基础知识，包括微信小程序的视图组件view、数据绑定、事件处理以及样式控制等内容。以下是对这个过程的详细解析： 1. **自定义dataIndex属性**：在微信小程序中...

微信小程序 动态绑定事件并实现事件修改样式

08-30

在微信小程序中，动态绑定事件和根据事件修改样式是实现用户交互的重要手段。本文将详细介绍如何在微信小程序中实现这一功能，并提供一个具体的实例代码。首先，动态绑定事件是通过在WXML（微信小程序的结构层）...

微信小程序根据条件显示样式

05-05

在微信小程序开发中，根据条件显示样式是一种常见的需求，它涉及到动态控制页面元素的可见性、颜色、大小等属性，从而实现丰富的用户交互体验。本文将深入探讨如何在微信小程序中实现这一功能。首先，我们需要了解...

微信小程序如何动态增删class类名

热门推荐

翾的博客

06-07

7万+

简述由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.说明通过数据绑定在3个标签上绑定相同的变量_num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.num来获取标签data-num

微信小程序动态切换class类名

猿飞梦的博客

03-27

3万+

之前用jquery时我们可以使用： $(".classify").eq(0).addClass("addStyleMi").siblings().removeClass("addStyleMi"); 动态的为元素切换类名，添加css样式。但是微信小程序中不提供操作Dom的方法，但我们也可以实现为元素动态切换类名。效果图： ...

微信小程序数组对象赋值，展示；动态修改多个class

u012765966的专栏

02-28

1629

数组对象赋值： data: { dataList: [] } let data ={ a: "aaa", b: "bbb" } this.setData({ ['dataList[' + index + ']']: data }) 对象数组显示： ...

微信小程序动态添加类名，切换class类名

weixin_41733299的博客

02-23

6078

微信小程序切换导航栏，因为微信小程序不能与jQuery一样用dom属性，例如addclass，removeclass这样的方法，就相对来说麻烦一点，可是有时候需要做切换导航栏这样的操作，参考代码如下： wxml： <view class="header-sort-nav"> <view bindtap="tapHan" class='sort-li {{_index==1?"nav-checked":""}}' data-index="1">招生通告</view&gt

微信小程序点击添加class类名，再点击移除（取消）class（即切换class类名）

coderYYY的博客

10-09

4115

小程序点击按钮添加class类名（选中单个按钮），再点击原先选中的，移除类名（取消选中）

小程序动态class

曹焱的博客

07-08

6154

{{}} 中的为动态class，当符合条件才会给class命名 class="options-itemCityli {{townliActive == 1 ? 'options-itemCityliActive' : ''}}"

微信小程序动态修改样式

kkk_3399的博客

11-03

2464

微信小程序动态修改样式

微信小程序实现动态添加class的功能，其实这样做就可以了

qq_44415875的博客

04-04

5683

*思路：**网页中可能使用document.getElementById().addClass()实现，但是在小程序中无法使用document获取元素。小程序可以构造一个数据结构，根据业务需求动态修改数据去判断是否添加选中样式。

小程序class参数

qq_38026437的博客

10-17

2981

写了一个关于排序第一至第三不同颜色的demo 很简单，万变不离其宗。随便改改就可以用了 .tp2-main{ width: 100%; background-color: white; border-bottom: 1rpx solid #ccc; } .flex1{ display: flex; flex-wrap: nowrap; padding: 10...

微信小程序 事件点击后如何动态增删class类名（自用，没毛病）

飞奔的屎壳郎

10-22

3262

问了度娘很久，感觉很多例子都用不到开发上，综合了三个小时。有了完整的方案流程后台返回了一个List保存在page中，wxml中 wx.for循环遍历。然后动态点击，调整class的样式案例效果（圈住的部分为例子，点击哪个语言，哪个标签就变黄）代码部分：简易流程：在wxml中使用 for循环时候的 index索引。当标签点击的时候使用data-index={{index}} 将in...

微信小程序点击改变样式