欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序點擊頂部導(dǎo)航欄切換樣式代碼實例

 更新時間：2019年11月12日 14:54:46   作者：里哈哈T  
這篇文章主要介紹了微信小程序點擊頂部導(dǎo)航欄切換樣式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

這篇文章主要介紹了微信小程序點擊頂部導(dǎo)航欄切換樣式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

類似這樣的效果

<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)點擊的時候添加這個樣式
 /* 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: "社會保障" },
   // { id: "7", desc: "文化生活" },
  ],
  currentTab: 1,
 },
 cateChange(e) {
  console.log(e)
  let that = this
  that.setData({

   currentTab: e.currentTarget.dataset.itemsid, //這個必須要

  })
 },

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

相關(guān)文章

  • JavaScript數(shù)組去重的方法總結(jié)【12種方法，號稱史上最全】

    JavaScript數(shù)組去重的方法總結(jié)【12種方法，號稱史上最全】

    這篇文章主要介紹了JavaScript數(shù)組去重的方法,結(jié)合實例形式較為詳細(xì)的總結(jié)分析了12種方法數(shù)組去重的方法,需要的朋友可以參考下
    2019-02-02
  • javascript 實現(xiàn)map集合

    javascript 實現(xiàn)map集合

    本文給大家分享的是個人項目中需要的一個小功能，當(dāng)時經(jīng)過一番度娘才實現(xiàn)，現(xiàn)在從項目中拿出來，分享給大家，需要的小伙伴快來參考下吧。
    2015-04-04
  • JavaScript實現(xiàn)簡單的計算器功能

    JavaScript實現(xiàn)簡單的計算器功能

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-03-03
  • JavaScript設(shè)計模式之原型模式分析【ES5與ES6】

    JavaScript設(shè)計模式之原型模式分析【ES5與ES6】

    這篇文章主要介紹了JavaScript設(shè)計模式之原型模式,簡單描述了原型模式的概念、原理,并結(jié)合實例形式分析了ES5與ES6實現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下
    2018-07-07
  • js腳本分頁代碼分享（7種樣式）

    js腳本分頁代碼分享（7種樣式）

    這篇文章主要介紹了7種JS腳本分頁樣式，推薦給大家，有需要的小伙伴可以參考下。
    2015-08-08
  • JS是按值傳遞還是按引用傳遞

    JS是按值傳遞還是按引用傳遞

    在分析這個問題之前，我們需了解什么是按值傳遞(call by value)，什么是按引用傳遞(call by reference)。在計算機(jī)科學(xué)里，這個部分叫求值策略(Evaluation Strategy)。它決定變量之間、函數(shù)調(diào)用時實參和形參之間值是如何傳遞的。
    2015-01-01
  • 使用 js 簡單的實現(xiàn) bind、call 、aplly代碼實例

    使用 js 簡單的實現(xiàn) bind、call 、aplly代碼實例

    這篇文章主要介紹了使用 js 簡單的實現(xiàn) bind、call 、aplly代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-09-09
  • JS模擬實現(xiàn)哈希表及應(yīng)用詳解

    JS模擬實現(xiàn)哈希表及應(yīng)用詳解

    這篇文章主要介紹了JS模擬實現(xiàn)哈希表及應(yīng)用,結(jié)合實例形式分析了javascript模擬實現(xiàn)哈希表的步驟、相關(guān)操作技巧與使用方法,需要的朋友可以參考下
    2018-05-05
  • JS中的繼承操作實例總結(jié)

    JS中的繼承操作實例總結(jié)

    這篇文章主要介紹了JS中的繼承操作,結(jié)合實例形式總結(jié)分析了JS中的原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、class繼承等常見繼承操作實現(xiàn)技巧,需要的朋友可以參考下
    2020-06-06
  • js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解

    js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解

    這篇文章主要為大家詳細(xì)介紹了js事件冒泡、事件捕獲和阻止默認(rèn)事件，感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論