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


Posted in Javascript onSeptember 14, 2018

本文为大家分享了微信小程序框架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数据更改需要重绘页面
   }
  }

效果图

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript document.images实例
May 27 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
图解js图片轮播效果
Dec 20 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
js数组去重的方法总结
Jan 18 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 #Javascript
react 国际化的实现代码示例
Sep 14 #Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 #Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 #Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 #Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 #Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 #Javascript
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
php图片上传类 附调用方法
2016/05/15 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python程序语言快速上手教程
2012/07/18 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
pandas中Timestamp类用法详解
2017/12/11 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python中的Django基本命令实例详解
2018/07/15 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python提取频域特征知识点浅析
2019/03/04 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
我爱祖国演讲稿
2014/09/02 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python