微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)
微信小程序 tabs選項(xiàng)卡效果
前言:
最近微信應(yīng)用號(hào)是炒的如火如荼,熱門(mén)滿(mǎn)滿(mǎn),但是也可以發(fā)現(xiàn)搜索關(guān)鍵詞出來(lái),各類(lèi)網(wǎng)站出現(xiàn)的還都是微信的官方文檔解釋。正好趕上這個(gè)熱潮,這幾天先把小程序技術(shù)文檔看了個(gè)遍,就直接著手寫(xiě)案例了。很多組件微信內(nèi)部已經(jīng)封裝完了,正好發(fā)現(xiàn)沒(méi)有tab選項(xiàng)卡效果,這兩天正好研究了下。思路如下:
1.首先點(diǎn)擊導(dǎo)航的時(shí)候需要兩個(gè)變量,一個(gè)存儲(chǔ)當(dāng)前點(diǎn)擊樣式類(lèi),一個(gè)是其它導(dǎo)航默認(rèn)的樣式類(lèi)
2.選項(xiàng)卡內(nèi)容列表同樣也需要兩個(gè)變量,一個(gè)存儲(chǔ)當(dāng)前顯示塊,一個(gè)存儲(chǔ)的是其它隱藏的默認(rèn)塊
3.使用三目運(yùn)算通過(guò)點(diǎn)擊獲取導(dǎo)航索引,根據(jù)索引判斷是否添加當(dāng)前類(lèi)【備注,這里我將點(diǎn)擊事件綁定在父級(jí)導(dǎo)航欄,通過(guò)target對(duì)象得到點(diǎn)擊觸發(fā)的事件對(duì)象屬性】
請(qǐng)結(jié)合如下效果圖:
接下來(lái)直接查看源碼:
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; }
最終演示效果如下:
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序開(kāi)發(fā)之實(shí)現(xiàn)選項(xiàng)卡(窗口頂部TabBar)頁(yè)面切換
- 微信小程序?qū)崿F(xiàn)選項(xiàng)卡功能
- 微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果
- 微信小程序 選項(xiàng)卡的簡(jiǎn)單實(shí)例
- 微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換
- 微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
- 微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
- 微信小程序自定義組件實(shí)現(xiàn)tabs選項(xiàng)卡功能
- 微信小程序?qū)崿F(xiàn)選項(xiàng)卡的簡(jiǎn)單實(shí)例
- 微信小程序?qū)崿F(xiàn)選項(xiàng)卡的方法
相關(guān)文章
JavaScript獲取上傳文件相關(guān)信息示例詳解
這篇文章主要為大家介紹了JavaScript獲取上傳文件相關(guān)信息示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序-getUserInfo回調(diào)的實(shí)例詳解
這篇文章主要介紹了微信小程序-getUserInfo回調(diào)的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,讓大家理解掌握這部分內(nèi)容,需要的朋友可以參考下2017-10-10js 實(shí)現(xiàn)Material UI點(diǎn)擊漣漪效果示例
這篇文章主要為大家介紹了js 實(shí)現(xiàn)Material UI點(diǎn)擊漣漪效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09autojs寫(xiě)一個(gè)畫(huà)板實(shí)現(xiàn)AI換頭狗頭蛇
這篇文章主要為大家介紹了autojs寫(xiě)一個(gè)畫(huà)板實(shí)現(xiàn)AI換頭狗頭蛇過(guò)程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01