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