微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例
更新時(shí)間：2019年11月12日 14:54:46 作者：里哈哈T
這篇文章主要介紹了微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序點(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-02
本文給大家分享的是個(gè)人項(xiàng)目中需要的一個(gè)小功能，當(dāng)時(shí)經(jīng)過一番度娘才實(shí)現(xiàn)，現(xiàn)在從項(xiàng)目中拿出來，分享給大家，需要的小伙伴快來參考下吧。2015-04-04
JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript設(shè)計(jì)模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之原型模式,簡單描述了原型模式的概念、原理,并結(jié)合實(shí)例形式分析了ES5與ES6實(shí)現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了7種JS腳本分頁樣式，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
在分析這個(gè)問題之前，我們需了解什么是按值傳遞(call by value)，什么是按引用傳遞(call by reference)。在計(jì)算機(jī)科學(xué)里，這個(gè)部分叫求值策略(Evaluation Strategy)。它決定變量之間、函數(shù)調(diào)用時(shí)實(shí)參和形參之間值是如何傳遞的。2015-01-01
使用 js 簡單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例
這篇文章主要介紹了使用 js 簡單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JS模擬實(shí)現(xiàn)哈希表及應(yīng)用詳解
這篇文章主要介紹了JS模擬實(shí)現(xiàn)哈希表及應(yīng)用,結(jié)合實(shí)例形式分析了javascript模擬實(shí)現(xiàn)哈希表的步驟、相關(guān)操作技巧與使用方法,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JS中的繼承操作,結(jié)合實(shí)例形式總結(jié)分析了JS中的原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、class繼承等常見繼承操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了js事件冒泡、事件捕獲和阻止默認(rèn)事件，感興趣的小伙伴們可以參考一下2016-08-08