微信小程序 tabs選項卡效果的實現(xiàn)
微信小程序 tabs選項卡效果
前言:
最近微信應(yīng)用號是炒的如火如荼,熱門滿滿,但是也可以發(fā)現(xiàn)搜索關(guān)鍵詞出來,各類網(wǎng)站出現(xiàn)的還都是微信的官方文檔解釋。正好趕上這個熱潮,這幾天先把小程序技術(shù)文檔看了個遍,就直接著手寫案例了。很多組件微信內(nèi)部已經(jīng)封裝完了,正好發(fā)現(xiàn)沒有tab選項卡效果,這兩天正好研究了下。思路如下:
1.首先點擊導(dǎo)航的時候需要兩個變量,一個存儲當(dāng)前點擊樣式類,一個是其它導(dǎo)航默認(rèn)的樣式類
2.選項卡內(nèi)容列表同樣也需要兩個變量,一個存儲當(dāng)前顯示塊,一個存儲的是其它隱藏的默認(rèn)塊
3.使用三目運算通過點擊獲取導(dǎo)航索引,根據(jù)索引判斷是否添加當(dāng)前類【備注,這里我將點擊事件綁定在父級導(dǎo)航欄,通過target對象得到點擊觸發(fā)的事件對象屬性】
請結(jié)合如下效果圖:
接下來直接查看源碼:
demo.wxml:
<view class="tab"> <view class="tab-left" bindtap="tabFun"> <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> </view> <view class="tab-right"> <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view> <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view> <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view> </view> </view>
demo.js:
Page( { data: { tabArr: { curHdIndex: 0, curBdIndex: 0 }, }, tabFun: function(e){ //獲取觸發(fā)事件組件的dataset屬性 var _datasetId=e.target.dataset.id; console.log("----"+_datasetId+"----"); var _obj={}; _obj.curHdIndex=_datasetId; _obj.curBdIndex=_datasetId; this.setData({ tabArr: _obj }); }, onLoad: function( options ) { alert( "------" ); } });
demo.wxss:
.tab{ display: flex; flex-direction: row; } .tab-left{ width: 200rpx; line-height: 160%; border-right: solid 1px gray; } .tab-left view{ border-bottom: solid 1px red; } .tab-left .active{ color: #f00; } .tab-right{ line-height: 160%; } .tab-right .right-item{ padding-left: 15rpx; display: none; } .tab-right .right-item.active{ display: block; }
最終演示效果如下:
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
JavaScript獲取上傳文件相關(guān)信息示例詳解
這篇文章主要為大家介紹了JavaScript獲取上傳文件相關(guān)信息示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序-getUserInfo回調(diào)的實例詳解
這篇文章主要介紹了微信小程序-getUserInfo回調(diào)的實例詳解的相關(guān)資料,希望通過本文能幫助到大家,讓大家理解掌握這部分內(nèi)容,需要的朋友可以參考下2017-10-10js 實現(xiàn)Material UI點擊漣漪效果示例
這篇文章主要為大家介紹了js 實現(xiàn)Material UI點擊漣漪效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09