|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 小女子也是剛入門微信小程序不久,發現微信內部很多組件都已經封裝好了,但是卻沒有tab選項卡效果的組件,最近正好需要用到,就研究了一下。整理出來供大家一起探討學習,哪里有問題或者可以改進的地方,歡迎大家指點吐槽。首先點擊導航的時候需要兩個變量,一個存儲當前點擊樣式類,一個是其它導航默認的樣式類 選項卡內容列表同樣也需要兩個變量,一個存儲當前顯示塊,一個存儲的是其它隱藏的默認塊 使用三目運算通過點擊獲取導航索引,根據索引判斷是否添加當前類【備注,這里我將點擊事件綁定在父級導航欄,通過target對象得到點擊觸發的事件對象屬性】 請結合如下效果圖:
demo.wxml: <blockquote><view class="tab"> demo.js Page( {
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0
},
},
tabFun: function(e){
//獲取觸發事件組件的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;
}最終演示效果如下:
總結: Kagami_Tiger的原理是選取tab,就調用選取tab的內容并隱藏其他tab內容,當然如果可以是把每個tab分類分別處于不同的頁面,然后每個tab一一對應每個不同的頁面,那樣或許會更好。我沒有那么開發過,也歡迎大家分享,相互學習舉一反三,才能一起進步。 更多 微信小程序:如何實現tabs選項卡效果示例相關文章請關注PHP中文網! 相關文章: 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!