標籤瀏覽是 Internet Explorer 中的一項功能,可讓您在一個瀏覽器視窗中開啟多個網站。可以在新分頁中開啟網頁,並透過點選要查看的分頁切換這些網頁。透過使用標籤瀏覽,可以潛在地減少工作列上顯示的項目數量。本文我們就為大家分享微信小程式實作選項卡功能。
先看看微信小程式上的選項卡的效果:
原理呢,就是先佈局好(這就不必說了吧),然後在上面的每一個選項卡上都定義一個相同的點擊事件,然後給每一個組件上綁定一個唯一的標識符,然後點擊事件觸發的時候,獲取到綁定的標識符,判斷當前點擊的是哪個選項卡,然後再判斷下面該顯示哪一塊,現在上程式碼:
wxml:
menu1 menu2 tab1 tab2
wxss:
.menu_box{ display: flex; height: 80rpx; } .menu1,.menu2{ flex: 1; font-size:30rpx; line-height: 80rpx; text-align: center; } .borders{ border-bottom: 4rpx solid #f00; color: #f00; } .tab1,.tab2{ height: 300rpx; background: #23bff3; } .tab2{ background: #ccc; }
JS:
menuTap:function(e){ var current=e.currentTarget.dataset.current;//获取到绑定的数据 //改变menuTapCurrent的值为当前选中的menu所绑定的数据 this.setData({ menuTapCurrent:current }); },
相關推薦:
####################### #微信小程式視頻,音樂,圖片組件詳解############微信小程式實作密碼輸入的實例############最完整的微信小程式項目實例######以上是實現選項卡功能的微信小程式的詳細內容。更多資訊請關注PHP中文網其他相關文章!