微信小程序框架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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Vue使用NProgress的操作过程解析
Oct 10 Javascript
详解JavaScript 作用域
Jul 14 Javascript
纯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实现登陆验证码(类似条行码状)
2006/10/09 PHP
层叠菜单的动态生成
2006/10/09 PHP
php 学习资料零碎东西
2010/12/04 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
详解Python文件修改的两种方式
2019/08/22 Python
成品仓管员岗位职责
2013/12/11 职场文书
个人简历自我评价
2014/01/06 职场文书
招商专员岗位职责
2014/02/08 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
党建示范点实施方案
2014/03/12 职场文书
税务会计岗位职责
2015/04/02 职场文书
通知的格式范文
2015/04/27 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫