微信小程序框架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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
javascript制作2048游戏
Mar 30 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
vue watch关于对象内的属性监听
Apr 22 Javascript
javascript实现滚轮轮播图片
Dec 13 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计算排列组合的方法
2013/11/13 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
水产养殖学应届生求职信
2013/09/29 职场文书
后勤园长自我鉴定
2013/10/17 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
父亲节活动策划方案
2014/08/24 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
团组织关系介绍信
2019/06/24 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
MySQL 分组查询的优化方法
2021/05/12 MySQL
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
MySQL一些常用高级SQL语句
2021/07/03 MySQL
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers