国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

zhilizhili-ui 2016 寫寫簡(jiǎn)單的tabview

JerryWangSAP / 715人閱讀

摘要：每天發(fā)垃圾文我也是蠻拼的沒(méi)有有有前面所說(shuō)的是什么設(shè)計(jì)設(shè)計(jì)要求點(diǎn)擊切換滑動(dòng)切換從圖片中我們可以看出上下不定自動(dòng)填充布局這個(gè)我以前講過(guò)了就不寫了如果用表述下就是這樣的很顯然我們需要一個(gè)一個(gè)

每天發(fā)垃圾文 我也是蠻拼的

web 沒(méi)有tabview

android 有tabview
ios 有tabcontrol
web 前面所說(shuō)的是什么

設(shè)計(jì)


設(shè)計(jì)要求 點(diǎn)擊tab切換 滑動(dòng)切換

從圖片中我們可以看出 上下不定 自動(dòng)填充布局這個(gè) 我以前講過(guò)了 就不寫了

如果用xml表述下 就是這樣的


 
    
        1
    
    
        2
        
    
        3
            
    
 
    
        1
    
    
        2
    
    
        3

很顯然 我們需要一個(gè)tabbar 一個(gè)swipe view

tabbar


    

        @for($i = 0; $i < 3; $i++)
            

                

                    

                        @if($i == 2)
                            測(cè)試sdsds <% $i+1 %>
                        @else
                            tab <% $i+1 %>
                        @endif
                    

                

            

        @endfor

為了后續(xù)測(cè)試 我們?cè)O(shè)置字?jǐn)?shù)不一

好的有了tabbar明顯不夠 還需要一個(gè)swipe-view 這個(gè)沒(méi)必要自己寫
找了一個(gè)插件 swipe github地址

html


    

        
1

        
2

        
3

js 再說(shuō)

好了 如何去定義一個(gè)組件 我按照ios和android的命名方式 盡量靠

比如最簡(jiǎn)單的tabview

class TabView {

    constructor(selector) {
        var tabView = document.querySelector(`${selector}`);
        var tabViewSwipeElement = document.querySelector(`${selector} .tabview__swipe-view`);
        var tabbarItems = document.queryAll(`${selector} .tabview__tab-bar .tabview__tab-bar-item`);

        var tabViewSwipe = this.setTabViewSwipe(tabViewSwipeElement);

        tabbarItems.forEach(function(tabbarItem, index) {
            tabbarItem.addEventListener("pointerdown", function(e) {
                tabViewSwipe.slide(index, 1000);
            });
        });
    }

    setTabViewSwipe(tabViewSwipeElement) {
        return Swipe(tabViewSwipeElement, {
            continuous: false
        })
    }

}

然后引用就可以了

document.addEventListener("DOMContentLoaded", function() {
    new window.TabView("#tab");
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78451.html

相關(guān)文章

  • zhilizhili-ui 2016始動(dòng) 移動(dòng)端select美化

    摘要：移動(dòng)端樣式不統(tǒng)一問(wèn)題如何解決用不過(guò)彈出層是不可以的但是展示的地方可以就像如圖我們找個(gè)設(shè)計(jì)然后你就可以開(kāi)始做了首先會(huì)導(dǎo)致一些不對(duì)的地方不可以單獨(dú)使用其實(shí)我們發(fā)現(xiàn)我們需要這樣一個(gè) 移動(dòng)端 select 樣式不統(tǒng)一問(wèn)題如何解決 用css 不過(guò)彈出層是不可以的 但是展示的地方可以 就像如圖showImg(https://segmentfault.com/img/bVrWCb); 我們找個(gè)設(shè)計(jì)s...

    dreamtecher 評(píng)論0 收藏0

  • zhilizhili-ui 2016始動(dòng) 開(kāi)始做個(gè)樣例站吧 （一）

    摘要：使用，開(kāi)發(fā)者用來(lái)表示異步數(shù)據(jù)流，通過(guò)操作符來(lái)查詢異步數(shù)據(jù)量，并使用來(lái)參數(shù)化異步數(shù)據(jù)流中的并發(fā)。在中，你可以表述多個(gè)異步數(shù)據(jù)流，并且使用對(duì)象訂閱事件流。因?yàn)樾蛄惺菙?shù)據(jù)流，你可以使用由擴(kuò)展方法實(shí)現(xiàn)的標(biāo)準(zhǔn)查詢操作符來(lái)查詢它們。 對(duì) 我又挖坑了 不過(guò)其實(shí)也不算挖坑 因?yàn)閡i構(gòu)建中就會(huì)有填坑的文章 之前一直在寫《編寫大型web頁(yè)面 結(jié)合現(xiàn)有前端形勢(shì)思考未來(lái)前端》這是一篇巨難寫的文章 估計(jì)要到年中...

    hzc 評(píng)論0 收藏0

  • zhilizhili-ui 2016 web app啟動(dòng)界面制作

    摘要：見(jiàn)圖確定設(shè)計(jì)稿大小使用我的中就可以生成一個(gè)兼容數(shù)值為了加速解析最好把要解析的文本放到頁(yè)面中如果你想使用在手機(jī)端那么就要使用配套的當(dāng)然不需要自己把提取出來(lái)方法已經(jīng)提取好不需要多慮版本號(hào)低于只需要支持一下然后在回調(diào)函數(shù)里就是正確的布局 content# 指代html content 就是你插入的html內(nèi)容 效果圖 showImg(https://segmentfault.com/img/...

    2501207950 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<