小程序动态改变样式class

最新推荐文章于 2024-04-30 09:31:09 发布
原创 最新推荐文章于 2024-04-30 09:31:09 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css3

本文介绍了在小程序中如何根据条件动态地改变元素的样式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>
微信小程序点击移除添加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 <!-- index.wxml --> <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 6366
示例是除最后一条都加下划线并且除第一条给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 3263
问了度娘很久，感觉很多例子都用不到开发上，综合了三个小时。有了完整的方案 流程 后台返回了一个List保存在page中，wxml中 wx.for循环遍历。然后动态点击，调整class的样式 案例效果 （圈住的部分为例子，点击哪个语言，哪个标签就变黄） 代码部分： 简易流程：在wxml中 使用 for循环时候的 index索引。当标签点击的时候 使用data-index={{index}} 将in...
微信小程序点击改变样式
最新发布
05-22
### 微信小程序点击事件修改样式 在微信小程序中，可以通过多种方式实现点击事件后改变样式的效果。以下是几种常见的方法： #### 方法一：通过条件渲染动态绑定 `class` 可以在 WXML 中使用三目运算符或其他逻辑表达式来动态切换类名，并结合点击事件更改数据状态。 ```html <view class="mn {{bg ? &#39;bg1&#39; : &#39;bg2&#39;}}" bindtap="change">点击样式改变</view> ``` 在此示例中，`bg` 是一个布尔值的数据字段，用于控制视图应用哪个类名[^2]。当用户触发 `bindtap` 的 `change` 函数时，可以更新 `bg` 的值从而切换样式。 ```javascript Page({ data: { bg: false, // 初始状态下不启用特定样式 }, change() { this.setData({ bg: !this.data.bg, // 反转当前的状态 }); } }); ``` #### 方法二：通过 JavaScript 动态调整对象风格 另一种更灵活的方式是利用 JavaScript 对象定义样式属性并通过 `setData()` 更新这些属性。这种方式特别适合需要精确控制多个 CSS 属性的情况。 ```html <view style="{{homeOutObj}}">动态样式区域</view> <button bindtap="changStyle">改变样式</button> ``` 对应的 JS 文件如下所示： ```javascript Page({ data: { homeOutObj: { color: &#39;red&#39;, fontSize: &#39;14rpx&#39; }, // 初始化样式 }, changStyle() { this.setData({ homeOutObj: { color: &#39;blue&#39;, fontSize: &#39;16rpx&#39; }, // 更改后的样式 }); }, }); ``` 此代码片段展示了如何通过调用函数 `changStyle` 来动态改变视图的颜色和字体大小[^3]。 #### 方法三：直接操作字符串形式的 `style` 绑定 对于简单的场景可以直接将整个样式作为字符串传递给组件的 `style` 属性。需要注意的是，如果其中某些数值为纯数字，则微信小程序会默认为其附加 `px` 单位[^1]。 ```html <view class="changeImageView" style="display:{{displayPhoto}};"> <view class="operbtn">测试</view> </view> <view class="section section_gap"> <view class="section__input"> <button class="operBtn {{select === 1 ? &#39;activeClass&#39; : &#39;&#39;}}" bindtap=&#39;selectBtn&#39; data-num="1" > 选项1 </button> <button class="operBtn {{select === 2 ? &#39;activeClass&#39; : &#39;&#39;}}" bindtap=&#39;selectBtn&#39; data-num="2" > 选项2 </button> </view> </view> ``` 配合相应的 Page 数据结构与事件处理程序： ```javascript Page({ data: { displayPhoto: &#39;none&#39;, select: 1, }, selectBtn(event) { const num = event.currentTarget.dataset.num; this.setData({ select: Number(num), }); }, }); ``` 这里实现了按钮被点击之后其自身的样式以及关联其他 UI 部分样式的联动变化效果[^4]。 --- ### 性能优化建议 无论采用哪种技术手段，在实际开发过程中都应当注意避免不必要的 DOM 结构重新绘制或布局计算带来的性能损耗。因此推荐尽量减少频繁地对同一组元素执行多次连续的小幅度改动行为[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值