微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例
這篇文章主要介紹了微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
類似這樣的效果
<view class='helpCateList'> <!-- 類別 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item"> <view class="content {{currentTab == item.itemsId ? 'active' : ''}}" data-itemsId='{{item.itemsId}}' bindtap='cateChange' >{{item.itemsName}} </view> </view> </scroll-view> </view>
.helpDisList .content{ position: relative; width: 710rpx; border-radius: 5rpx; } .active{ //當(dāng)點(diǎn)擊的時(shí)候添加這個(gè)樣式 /* border-bottom: 4rpx solid rgb(252, 186, 7); */ color:rgb(252, 186, 7); }
Page({ data:{ helpCateList:[ //數(shù)據(jù)從后臺請求回來賦值 // { id: "1", desc: "康復(fù)醫(yī)療" }, // { id: "2", desc: "教育" }, // { id: "3", desc: "就業(yè)" }, // { id: "4", desc: "扶貧" }, // { id: "5", desc: "職業(yè)培訓(xùn)" }, // { id: "6", desc: "社會(huì)保障" }, // { id: "7", desc: "文化生活" }, ], currentTab: 1, }, cateChange(e) { console.log(e) let that = this that.setData({ currentTab: e.currentTarget.dataset.itemsid, //這個(gè)必須要 }) },
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript數(shù)組去重的方法總結(jié)【12種方法,號稱史上最全】
這篇文章主要介紹了JavaScript數(shù)組去重的方法,結(jié)合實(shí)例形式較為詳細(xì)的總結(jié)分析了12種方法數(shù)組去重的方法,需要的朋友可以參考下2019-02-02JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03JavaScript設(shè)計(jì)模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之原型模式,簡單描述了原型模式的概念、原理,并結(jié)合實(shí)例形式分析了ES5與ES6實(shí)現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07使用 js 簡單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例
這篇文章主要介紹了使用 js 簡單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JS模擬實(shí)現(xiàn)哈希表及應(yīng)用詳解
這篇文章主要介紹了JS模擬實(shí)現(xiàn)哈希表及應(yīng)用,結(jié)合實(shí)例形式分析了javascript模擬實(shí)現(xiàn)哈希表的步驟、相關(guān)操作技巧與使用方法,需要的朋友可以參考下2018-05-05