微信小程序框架wepy之動態(tài)控制類名

更新時間：2018年09月14日 15:13:02 作者：kingov

這篇文章主要為大家詳細介紹了微信小程序框架wepy之動態(tài)控制類名，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序框架wepy之動態(tài)控制類名的具體實現(xiàn)方法，供大家參考，具體內(nèi)容如下

控制類名

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數(shù)據(jù)更改需要重繪頁面
   }
  }

效果圖

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

微信小程序如何像vue一樣在動態(tài)綁定類名

相關(guān)文章

js setTimeout()函數(shù)介紹及應(yīng)用以倒計時為例
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式，下面有個倒計時的示例，需要的朋友可以學(xué)習(xí)下
2013-12-12
使用JSLint提高JS代碼質(zhì)量方法分享
這篇文章主要介紹了JSLint提高JS代碼質(zhì)量的方法，有需要的朋友可以參考一下
2013-12-12
JS實現(xiàn)左右無縫輪播圖代碼
這篇文章主要介紹了JS實現(xiàn)左右無縫輪播圖代碼的相關(guān)資料,小編看本段代碼非常不錯，具有參考借鑒價值，特此分享腳本之家平臺，需要的朋友可以參考下
2016-05-05
javascript跨域的4種方法和原理詳解
這里說的js跨域是指通過js在不同的域之間進行數(shù)據(jù)傳輸或通信，比如用ajax向一個不同的域請求數(shù)據(jù)，或者通過js獲取頁面中不同域的框架中(iframe)的數(shù)據(jù)。只要協(xié)議、域名、端口有任何一個不同，都被當(dāng)作是不同的域。
2014-04-04
JS中cookie的使用及缺點講解
Cookie就是這樣的一種機制。它可以彌補HTTP協(xié)議無狀態(tài)的不足。在Session出現(xiàn)之前，基本上所有的網(wǎng)站都采用Cookie來跟蹤會話。下面通過本文給大家介紹JS中cookie的使用及缺點，需要的朋友參考下吧
2017-05-05
webpack配置的最佳實踐分享
在網(wǎng)上看到很多人都寫了“webpack最佳實踐方案”，適合的才是“最佳”的，在這里總結(jié)一下自己在工作過程中總結(jié)出來的最佳實踐，所以本文主要介紹了關(guān)于webpack配置的相關(guān)資料，需要的朋友們可以參考借鑒，下面來一起看看吧。
2017-04-04
javascript單張多張圖無縫滾動實例代碼
在本篇文章里小編給大家分享的是關(guān)于javascript單張多張圖無縫滾動實例代碼和實例，需要的朋友們可以參考下。
2020-05-05
JavaScript對象的創(chuàng)建模式與繼承模式示例講解
繼承機制是面向?qū)ο蟪绦蛟O(shè)計使代碼可以復(fù)用的最重要的手段，它允許程序員在保持原有的特性基礎(chǔ)上進行擴展，增加功能，這樣產(chǎn)生新的類，稱作是派生類。繼承呈現(xiàn)了面向?qū)ο蟪绦蛟O(shè)計的層析結(jié)構(gòu)，體現(xiàn)了由簡單到復(fù)雜的認知過程。繼承是類設(shè)計層次的復(fù)用
2022-12-12
p5.js臨摹動態(tài)圖形實現(xiàn)方法詳解
這篇文章主要為大家詳細介紹了p5.js臨摹動態(tài)圖形的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
ES6代碼轉(zhuǎn)ES5詳細教程(babel安裝使用教程)
Babel 是一個廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行，這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持，這篇文章主要介紹了ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程),需要的朋友可以參考下
2023-01-01