zhilizhili-ui 2016 写写简单的tabview

JerryWangSAP 发布于2019-08-19 17:21 / 669人阅读

摘要：每天发垃圾文我也是蛮拼的没有有有前面所说的是什么设计设计要求点击切换滑动切换从图片中我们可以看出上下不定自动填充布局这个我以前讲过了就不写了如果用表述下就是这样的很显然我们需要一个一个

每天发垃圾文我也是蛮拼的

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");
});

GPU云服务器云服务器 tabview 免费的cdn 2016 简单的简单的爬虫

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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