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

更新時間：2019年11月12日 14:54:46 作者：里哈哈T

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

類似這樣的效果

<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{ //當點擊的時候添加這個樣式
 /* border-bottom: 4rpx solid rgb(252, 186, 7); */
 color:rgb(252, 186, 7);
}

Page({
 data:{

  helpCateList:[ //數據從后臺請求回來賦值
   // { id: "1", desc: "康復醫(yī)療" },
   // { id: "2", desc: "教育" },
   // { id: "3", desc: "就業(yè)" },
   // { id: "4", desc: "扶貧" },
   // { id: "5", desc: "職業(yè)培訓" },
   // { id: "6", desc: "社會保障" },
   // { id: "7", desc: "文化生活" },
  ],
  currentTab: 1,
 },
 cateChange(e) {
  console.log(e)
  let that = this
  that.setData({

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

  })
 },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript如何實現在文本框(密碼框)輸入提示語
為了更好的達到用戶體驗度，我們在登錄表單時會有一些提示語言，比如說：“請輸入用戶名”和“請輸入密碼”等語言，下面小編通過本篇文章給大家分享JavaScript如何實現在密碼框中出現提示語，對js密碼框提示語相關知識感興趣的朋友一起學習吧
2015-12-12
js獲取指定時間的前幾秒
本文主要介紹了根據一張圖片的拍攝時間獲取到這個時間前二后三的一個五秒鐘的視頻信息的實例方法。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04
javascript sudoku 數獨智力游戲生成代碼
javascript sudoku 數獨智力游戲生成代碼，喜歡的朋友可以參考下。
2010-03-03
簡單了解JavaScript操作XPath的一些基本方法
XPath構建于XML之上,以表示路徑的方式來確定XML中元素位置,事實上并不是太常用,這里我們來簡單了解JavaScript操作XPath的一些基本方法
2016-06-06
JS中用三種方式實現導航菜單中的二級下拉菜單
我們在淘寶、搜狐等大型網站上都可以看到使用的一些二級下拉菜單，比如下面這張圖片。那么如何實現導航菜單欄中的二級下拉菜單呢？下面小編給大家分享JS中用三種方式實現導航菜單中的二級下拉菜單，感興趣的朋友一起看看吧
2016-10-10
webpack的CSS加載器的使用
這篇文章主要介紹了webpack的CSS加載器的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
淺談JavaScript工具鏈不完全指南
經過這么多年的發(fā)展，JavaScript 早已經不是當年那個不太起眼的腳本語言。如今的 JavaScript 可以說是風光無限，在 Web 前端、移動端、服務端甚至物聯網設備上都大展身手，到處都有它的身影。
2021-05-05
12個提高JavaScript技能的概念(小結)
這篇文章主要介紹了12個提高JavaScript技能的概念(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
微信小程序接入vant Weapp組件的詳細步驟
這篇文章主要介紹了微信小程序接入vant Weapp組件的詳細步驟,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
基于el-slider實現一個能拖動的時間范圍選擇器
這篇文章主要介紹了基于el-slider實現一個能拖動的時間范圍選擇器,并通過實例代碼介紹了基于element-ui el-slider實現滑動限位器的方法,需要的朋友可以參考下
2024-02-02