實現選項卡功能的微信小程式

小云云
發布: 2018-05-15 14:15:30
原創
2231 人瀏覽過

標籤瀏覽是 Internet Explorer 中的一項功能,可讓您在一個瀏覽器視窗中開啟多個網站。可以在新分頁中開啟網頁,並透過點選要查看的分頁切換這些網頁。透過使用標籤瀏覽,可以潛在地減少工作列上顯示的項目數量。本文我們就為大家分享微信小程式實作選項卡功能。

先看看微信小程式上的選項卡的效果:

原理呢,就是先佈局好(這就不必說了吧),然後在上面的每一個選項卡上都定義一個相同的點擊事件,然後給每一個組件上綁定一個唯一的標識符,然後點擊事件觸發的時候,獲取到綁定的標識符,判斷當前點擊的是哪個選項卡,然後再判斷下面該顯示哪一塊,現在上程式碼:

wxml:

 menu1 menu2   
登入後複製

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!