脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序框架wepy之动态控制类名

微信小程序框架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数据更改需要重绘页面
   }
  }

效果图

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

您可能感兴趣的文章:

相关文章

  • js setTimeout()函数介绍及应用以倒计时为例

    js setTimeout()函数介绍及应用以倒计时为例

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，下面有个倒计时的示例，需要的朋友可以学习下
    2013-12-12
  • 使用JSLint提高JS代码质量方法分享

    使用JSLint提高JS代码质量方法分享

    这篇文章主要介绍了JSLint提高JS代码质量的方法，有需要的朋友可以参考一下
    2013-12-12
  • JS实现左右无缝轮播图代码

    JS实现左右无缝轮播图代码

    这篇文章主要介绍了JS实现左右无缝轮播图代码的相关资料,小编看本段代码非常不错，具有参考借鉴价值，特此分享脚本之家平台，需要的朋友可以参考下
    2016-05-05
  • javascript跨域的4种方法和原理详解

    javascript跨域的4种方法和原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
    2014-04-04
  • JS中cookie的使用及缺点讲解

    JS中cookie的使用及缺点讲解

    Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。下面通过本文给大家介绍JS中cookie的使用及缺点，需要的朋友参考下吧
    2017-05-05
  • webpack配置的最佳实践分享

    webpack配置的最佳实践分享

    在网上看到很多人都写了“webpack最佳实践方案”，适合的才是“最佳”的，在这里总结一下自己在工作过程中总结出来的最佳实践，所以本文主要介绍了关于webpack配置的相关资料，需要的朋友们可以参考借鉴，下面来一起看看吧。
    2017-04-04
  • javascript单张多张图无缝滚动实例代码

    javascript单张多张图无缝滚动实例代码

    在本篇文章里小编给大家分享的是关于javascript单张多张图无缝滚动实例代码和实例，需要的朋友们可以参考下。
    2020-05-05
  • JavaScript对象的创建模式与继承模式示例讲解

    JavaScript对象的创建模式与继承模式示例讲解

    继承机制是面向对象程序设计使代码可以复用的最重要的手段，它允许程序员在保持原有的特性基础上进行扩展，增加功能，这样产生新的类，称作是派生类。继承呈现了面向对象程序设计的层析结构，体现了由简单到复杂的认知过程。继承是类设计层次的复用
    2022-12-12
  • p5.js临摹动态图形实现方法详解

    p5.js临摹动态图形实现方法详解

    这篇文章主要为大家详细介绍了p5.js临摹动态图形的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • ES6代码转ES5详细教程(babel安装使用教程)

    ES6代码转ES5详细教程(babel安装使用教程)

    Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行，这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持，这篇文章主要介绍了ES6代码转ES5教程(babel安装使用教程),需要的朋友可以参考下
    2023-01-01

最新评论