微信小程序框架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实现的批量图片预览加载功能
Aug 14 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
javascript每日必学之循环
Feb 19 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
浅谈Vue 性能优化之深挖数组
Dec 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
那些年一起学习的PHP(一)
2012/03/21 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
js中的布尔运算符使用介绍
2013/11/20 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
js 操作符汇总
2014/11/08 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
Position属性之relative用法
2015/12/14 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Python join()函数原理及使用方法
2020/11/14 Python
前台文员个人求职信范文
2014/01/05 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
申报优秀教师材料
2014/12/16 职场文书
初中家长评语大全
2014/12/26 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL