当前位置: 首页 > 编程笔记 >

微信小程序 实现点击添加移除class

祖翰音
2023-03-14
本文向大家介绍微信小程序 实现点击添加移除class,包括了微信小程序 实现点击添加移除class的使用技巧和注意事项,需要的朋友参考一下

微信小程序点击添加移除class类实现动态变化class


wxml:

<view class="location_bottom" hidden="" > 
   <view class="{{_num == 1?'add_citying':'add_city'}}" data-num = "1" bindtap="clickNum">北京</view> 
   <view class="{{_num == 2?'add_citying':'add_city'}}" data-num = "2" bindtap="clickNum">上海</view> 
 </view> 

wxss:

.location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size:
 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid; padding: 0 20rpx; align-items: center;display: -webkit-flex;} 
.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx 
solid #ebebeb; color: #000000;margin-right: 20rpx; } 
.add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center;
 border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;} 

js:

Page({ 
 data: { 
  _num: 0,   
 }, 
 clickNum: function (e) { 
  console.log(e.target.dataset.num) 
  this.setData({ 
   _num: e.target.dataset.num 
  }) 
 }, 
 onLoad: function (options) { 
 
 } 
 
  
}) 

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

 类似资料:
  • 本文向大家介绍微信小程序实现给循环列表添加点击样式实例,包括了微信小程序实现给循环列表添加点击样式实例的使用技巧和注意事项,需要的朋友参考一下 微信小程序实现给循环列表添加点击样式实例 微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: js文件: 核心点:c

  • 本文向大家介绍微信小程序按钮点击动画效果的实现,包括了微信小程序按钮点击动画效果的实现的使用技巧和注意事项,需要的朋友参考一下 动画效果如下: GIF看起来可能会有点卡 wxml wxss 总结 以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持! 如果你觉得本文对你有帮助,欢迎

  • 本文向大家介绍微信小程序实现留言板,包括了微信小程序实现留言板的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现留言板的具体代码,供大家参考,具体内容如下 CSS: js: html 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序实现聊天室,包括了微信小程序实现聊天室的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现聊天室的具体代码,供大家参考,具体内容如下 正文: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍微信小程序 实战小程序实例,包括了微信小程序 实战小程序实例的使用技巧和注意事项,需要的朋友参考一下 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块。这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start。 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading

  • 本文向大家介绍微信小程序 scroll-view 实现锚点跳转功能,包括了微信小程序 scroll-view 实现锚点跳转功能的使用技巧和注意事项,需要的朋友参考一下 在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性。   实现锚点跳转主要以下几点:   1、最外层容