微信小程序框架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 相关文章推荐
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
基于php编程规范(详解)
2017/08/17 PHP
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
JS跨域问题详解
2014/11/25 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
Python中操作符重载用法分析
2016/04/29 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
毕业学生推荐信
2013/12/01 职场文书
自荐信封面
2013/12/04 职场文书
采购主管的岗位职责
2013/12/17 职场文书
活动总结报告格式
2014/05/09 职场文书
秋冬农业生产标语
2014/10/09 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL