zhilizhili-ui 2016 寫寫簡單的tabview

JerryWangSAP 發布于2019-08-19 17:21 / 721人閱讀

摘要：每天發垃圾文我也是蠻拼的沒有有有前面所說的是什么設計設計要求點擊切換滑動切換從圖片中我們可以看出上下不定自動填充布局這個我以前講過了就不寫了如果用表述下就是這樣的很顯然我們需要一個一個

每天發垃圾文我也是蠻拼的

web 沒有tabview

android 有tabview
ios 有tabcontrol
web 前面所說的是什么

設計

設計要求點擊tab切換滑動切換

從圖片中我們可以看出上下不定自動填充布局這個我以前講過了就不寫了

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

很顯然我們需要一個tabbar 一個swipe view

tabbar


    
        @for($i = 0; $i < 3; $i++)
            
                
                    
                        @if($i == 2)
                            測試sdsds <% $i+1 %>
                        @else
                            tab <% $i+1 %>
                        @endif
                    
                
            
        @endfor

為了后續測試我們設置字數不一

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

html

js 再說

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

比如最簡單的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");
});

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78451.html

zhilizhili-ui 2016始動移動端select美化

摘要：移動端樣式不統一問題如何解決用不過彈出層是不可以的但是展示的地方可以就像如圖我們找個設計然后你就可以開始做了首先會導致一些不對的地方不可以單獨使用其實我們發現我們需要這樣一個移動端 select 樣式不統一問題如何解決用css 不過彈出層是不可以的但是展示的地方可以就像如圖showImg(https://segmentfault.com/img/bVrWCb); 我們找個設計s...

dreamtecher 2019-08-28 18:27 評論0 收藏0
zhilizhili-ui 2016始動開始做個樣例站吧（一）

摘要：使用，開發者用來表示異步數據流，通過操作符來查詢異步數據量，并使用來參數化異步數據流中的并發。在中，你可以表述多個異步數據流，并且使用對象訂閱事件流。因為序列是數據流，你可以使用由擴展方法實現的標準查詢操作符來查詢它們。對我又挖坑了不過其實也不算挖坑因為ui構建中就會有填坑的文章之前一直在寫《編寫大型web頁面結合現有前端形勢思考未來前端》這是一篇巨難寫的文章估計要到年中...

hzc 2019-08-19 17:17 評論0 收藏0
zhilizhili-ui 2016 web app啟動界面制作

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

2501207950 2019-08-28 18:30 評論0 收藏0