微信小程序框架wepy之动态控制类名

更新时间：2018年09月14日 15:13:02 作者：kingov

这篇文章主要为大家详细介绍了微信小程序框架wepy之动态控制类名，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法，供大家参考，具体内容如下

控制类名

style

<style lang="less" scoped>
  .liBkgCor {
   background-color: red;
  }
</style>

template

<view class="t_tab">
 <li @tap.stop="changeLi({{1}})" class="{{ liColor == 1 ? 'liBkgCor':'' }}">推荐</li> 
 <li @tap.stop="changeLi({{2}})" class="{{ liColor == 2 ? 'liBkgCor':'' }}">洗手台</li> 
 <li @tap.stop="changeLi({{3}})" class="{{ liColor == 3 ? 'liBkgCor':'' }}">淋浴</li>
 <li @tap.stop="changeLi({{4}})" class="{{ liColor == 4 ? 'liBkgCor':'' }}">马桶</li>
</view>

script

 data = {
   liColor:1 //默认让第一个tab高亮
  }
  methods = {
   changeLi(e){
    this.liColor = e.target.dataset.wepyParamsA 
    this.$apply() //通知wepy框架data数据更改需要重绘页面
   }
  }

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

微信小程序如何像vue一样在动态绑定类名

springMVC结合AjaxForm上传文件
这篇文章主要为大家详细介绍了springMVC结合AjaxForm上传文件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
JavaScript新手必看之var在for循环中的坑
var这个关键字在JS当中是相当常用的，但同时配合到for循环的话会出现不符合预期的运行结果，所以本文就来为大家讲讲如何避免这种情况的出现
2023-05-05
深入理解JavaScript系列（16）闭包（Closures）
本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包（closure）。闭包其实大家都已经谈烂了。尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的
2012-04-04
JavaScript的parseInt 进制问题
今天在整理以前写过的一段根据周期值自动计算下次执行日期的js代码，发现一bug,我使用parseInt对源数据串进行转换，当输入类似：2009-05-05时，parseInt将把串的05做8进制转换，这样结果自然就不对了。
2009-05-05
js实现固定宽高滑动轮播图效果
本文主要分享了js实现PC固定宽高滑动轮播图效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript 异步调用框架 (Part 2 - 用例设计)
在上一篇文章里说到，我们要设计一个异步调用框架，最好能够统一同步异步调用的接口，同时具体调用顺序与实现方式无关。那么我们现在就来设计这样一个框架的用例。
2009-08-08
js实现倒计时器自定义时间和暂停
这篇文章主要为大家详细介绍了js实现倒计时器自定义时间和暂停，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
浅谈javascript对象模型和function对象
这篇文章主要简单介绍了javascript对象模型和function对象，以及相关的示例代码，非常实用，需要的小伙伴参考下
2014-12-12
JavaScript中检测数据类型的四种方法
这篇文章主要给大家分享的是JavaScript中检测数据类型的四种方法，有 typeof、instanceof、constructor、Object.prototype.toString.call()，下面文章详细介绍内容，需要的小伙伴可以参考一下
2022-01-01