微信小程序框架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 OOP类与继承
Nov 15 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
微信小程序实现页面浮动导航
Jan 08 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方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php实现word转html的方法
2016/01/22 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
基于python实现操作redis及消息队列
2020/08/27 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
小学标准化建设汇报材料
2014/08/16 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB