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