微信小程序點擊頂部導(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é)合實例形式較為詳細(xì)的總結(jié)分析了12種方法數(shù)組去重的方法,需要的朋友可以參考下2019-02-02JavaScript設(shè)計模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計模式之原型模式,簡單描述了原型模式的概念、原理,并結(jié)合實例形式分析了ES5與ES6實現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07使用 js 簡單的實現(xiàn) bind、call 、aplly代碼實例
這篇文章主要介紹了使用 js 簡單的實現(xiàn) bind、call 、aplly代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09