APICloud 左右滑动部分超出屏幕高度解决方案

作者: 一个冬季 | 来源:发表于2018-04-20 16:52 被阅读6次

最近有这样的一个功能，我们需要左右滑动的部分超出了屏幕的高度了。最开始想的是采用openFrame来解决，但是你发现这样是不可以的，因为他会浮在win上面。

APICloud尴尬之处,滑动的功能超出屏幕高度.png

为了解决这个问题,我也遇到了很多问题，
1、超出屏幕高度它页面不会滚动
2、加入swiper后，无法实现左右滚动。

超出屏幕高度它页面不会滚动

出现这个原因

body, html, #allmap {
              width: 100%;
              height: 100%;
              overflow: hidden;
              margin: 0;
              font-family: "微软雅黑";
          }

是因为你像上面那样定义了height为100%，然后又写了overflow:fidden，那么导致的结果就是被隐藏部分，毕竟你已经定死了高度为手机的高度，它不会采用默认增长的模式height:auto 这样的结构

解决APIcloud尴尬地方.gif

关于如何绘画圆形这个我就不会再细细的说明了。大家可以看我前面的一篇文章就可以知道怎么画的，我这篇文章就只会再描述之前我没有描述到的。我想说下实现那种图的思路，
首先创建SVG--->添加g标签--->添加path画圆--->再次添加path画圆

定义数据源

       var innerRidus = 40;//内圆半径
        var outerRidus = 60;
        var circleSVGW = 200;//SVG的宽度
        var circleSVGH = 130;
        var datasetLeft = '';
        var datasetRight = '';
        var COL1 = 161.9, COL2 = 0.1, COL3 = 158.6, COL4 = 3.4, COL5 = 162;
        if (status == COMPANINDICATOR_10) {//这里算出占有量
            datasetLeft = COL1 / COL5 * 100;
            datasetRight = COL2 / COL5 * 100;
        } else {
            datasetLeft = COL3 / COL5 * 100;
            datasetRight = COL4 / COL5 * 100;
        }
        if (datasetLeft < 1) {//如果我们的量<1那么都要给1的比例
            datasetLeft = 1
        }
        if (datasetRight < 1) {
            datasetRight = 1
        }
        //这里我定义了一个取值范围。
        var arrLeft = [datasetLeft, (100 - datasetLeft)];
        var arrRight = [datasetRight, (100 - datasetRight)];

        //值访问器，可以将数据转换为d，然后作用于path上
        var pie = d3.layout.pie().value(function (d) {
            return d;
        });
        //可以将数据转换为d，然后作用于path上
        var piedataLeft = pie(arrLeft);
        var piedataRight = pie(arrRight);

上面我认为没有什么可以说的了，都是比较简单的

开始画圆

因为这里我们要画4个圆，所以我把公共的代码抽离了出来

/**
     * @date:2018/4/20 16:34
     * 功能: 画圆公共的代码
     * @innerRidus 内圆半径
     * @outerRidus 外圆半径
     * @circleSVGW SVG宽度
     * @circleSVGH SVG高度
     * @piedataLeft 数据源
     * @svgId 绘画到哪个ID上
     * @status 状态码
     */
    function d3CircleUtil(innerRidus, outerRidus, circleSVGW, circleSVGH, piedataLeft, svgId, status) {
        //创建弧生成器
        var arcGenerator = d3.svg.arc()
                .innerRadius(innerRidus)
                .outerRadius(outerRidus);

        //定义SVG的宽高
        var svg1 = d3.select(svgId)
                .append("svg")
                .attr("width", circleSVGW)
                .attr("height", circleSVGH);

        //添加G标签，移动到中心位置
        var backGroundDataSet = [{startAngle: 0, endAngle: Math.PI * 2}];//定义背景圆
        var arcs = svg1.selectAll("g")
                .data(backGroundDataSet)
                .enter()
                .append("g")
                .attr("transform", "translate(" + circleSVGW / 2 + "," + circleSVGH / 2 + ")");

        arcs.append("path")
                .style("fill", "#203974")
                .attr("d", function (d) {
                    return arcGenerator(d);
                });

        //绘制占比
        arcs.append("path")
                .data(piedataLeft)
                .attr("fill", status == COMPANINDICATOR_30 ? "#D16548" : "#3D5DE2")
                .attr("d", function (d) {
                    return arcGenerator(d);
                })
                .transition()
                .delay(function (d, i) {
                    return i * 400;
                })
                .duration(2000)
                .ease("linear")
                .attrTween('d', function (d) {
                    var i = d3.interpolate(d.startAngle, d.endAngle);
                    return function (t) {
                        d.endAngle = i(t);
                        return arcGenerator(d);
                    }
                });
    }

上面我有直接对其定义[{startAngle: 0, endAngle: Math.PI * 2}]，因为我们需要先画第一个圆。svg1.selectAll("g").data(backGroundDataSet).enter().append("g")我添加g标签然后有定义了path绘制圆形图。

初始化swiper

 swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            spaceBetween: 30,
            on: {
                init: function () { //Swiper初始化了
                    inventoryInit(COMPANINDICATOR_10);
                },
                slideChangeTransitionStart: function () {
                    var index = this.activeIndex;
                    var navBarBar = document.getElementById("tab_flag");
                    navBarBar.style.webkitTransform = 'translateX(' + index * 100 + '%)';//设置下标滑动
                    document.body.querySelector("#title ");
                    var a = document.getElementById("title");
                    del_ff(a);
                    if (this.activeIndex == 0) {
                        a.firstChild.style.color = 'red';
                        a.lastChild.style.color = 'white';
                        d3.select("#brandLeft01").select("svg").remove();
                        d3.select("#brandLeft02").select("svg").remove();
                        inventoryInit(COMPANINDICATOR_10);
                    } else {
                        a.firstChild.style.color = 'white';
                        a.lastChild.style.color = 'red';
                        d3.select("#brandLeft03").select("svg").remove();
                        d3.select("#brandLeft04").select("svg").remove();
                        inventoryInit(COMPANINDICATOR_20);
                    }
                }
            }
        });

swiper主要的作用是用来切换页面的。
注意！！！如果我们要删除我们画的圆需要这样做d3.select("#brandLeft01").select("svg").remove();//这句话的作用就是把brandLeft01里面的SVG给删除。
swiper里面的on在第一次加载的时候会调用。slideChangeTransitionStart用于滑动监听的作用
注意！！！我们在使用swiper的时候要定义宽高，如果出现swiper无法滑动的现象，你首先要检查某个地方是否出现了错误

点击标题切换页面

    function swiperClick(num){
        swiper.slideTo(num);
    }

所有代码如下
JS

<script type="text/javascript">
    var swiper;
    var COMPANINDICATOR_10 = "10";
    var COMPANINDICATOR_20 = "20";
    var COMPANINDICATOR_30 = "30";
    var COMPANINDICATOR_40 = "40";
    $(function () {
        swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            spaceBetween: 30,
            on: {
                init: function () { //Swiper初始化了
                    inventoryInit(COMPANINDICATOR_10);
                },
                slideChangeTransitionStart: function () {
                    var index = this.activeIndex;
                    var navBarBar = document.getElementById("tab_flag");
                    navBarBar.style.webkitTransform = 'translateX(' + index * 100 + '%)';//设置下标滑动
                    document.body.querySelector("#title ");
                    var a = document.getElementById("title");
                    del_ff(a);
                    if (this.activeIndex == 0) {
                        a.firstChild.style.color = 'red';
                        a.lastChild.style.color = 'white';
                        d3.select("#brandLeft01").select("svg").remove();
                        d3.select("#brandLeft02").select("svg").remove();
                        inventoryInit(COMPANINDICATOR_10);
                    } else {
                        a.firstChild.style.color = 'white';
                        a.lastChild.style.color = 'red';
                        d3.select("#brandLeft03").select("svg").remove();
                        d3.select("#brandLeft04").select("svg").remove();
                        inventoryInit(COMPANINDICATOR_20);
                    }
                }
            }
        });
    });

    function swiperClick(num){
        swiper.slideTo(num);
    }

    function inventoryInit(status) {
        var innerRidus = 40;
        var outerRidus = 60;
        var circleSVGW = 200;
        var circleSVGH = 130;
        var datasetLeft = '';
        var datasetRight = '';
        var COL1 = 161.9, COL2 = 0.1, COL3 = 158.6, COL4 = 3.4, COL5 = 162;
        if (status == COMPANINDICATOR_10) {
            datasetLeft = COL1 / COL5 * 100;
            datasetRight = COL2 / COL5 * 100;
        } else {
            datasetLeft = COL3 / COL5 * 100;
            datasetRight = COL4 / COL5 * 100;
        }
        if (datasetLeft < 1) {
            datasetLeft = 1
        }
        if (datasetRight < 1) {
            datasetRight = 1
        }
        var arrLeft = [datasetLeft, (100 - datasetLeft)];
        var arrRight = [datasetRight, (100 - datasetRight)];

        //值访问器，可以将数据转换为角度
        var pie = d3.layout.pie().value(function (d) {
            return d;
        })
        var piedataLeft = pie(arrLeft);
        var piedataRight = pie(arrRight);

        //画第一个个圆
        if (status == COMPANINDICATOR_10) {//品牌分类
            d3CircleUtil(innerRidus, outerRidus, circleSVGW, circleSVGH, piedataLeft, '#brandLeft01', COMPANINDICATOR_30);
            d3CircleUtil(innerRidus, outerRidus, circleSVGW, circleSVGH, piedataRight, '#brandLeft02', COMPANINDICATOR_40);
        } else {//区域分类
            d3CircleUtil(innerRidus, outerRidus, circleSVGW, circleSVGH, piedataLeft, '#brandLeft03', COMPANINDICATOR_30);
            d3CircleUtil(innerRidus, outerRidus, circleSVGW, circleSVGH, piedataRight, '#brandLeft04', COMPANINDICATOR_40);

        }
    }

    /**
     * @date:2018/4/20 16:34
     * 功能: 画圆公共的代码
     * @innerRidus 内圆半径
     * @outerRidus 外圆半径
     * @circleSVGW SVG宽度
     * @circleSVGH SVG高度
     * @piedataLeft 数据源
     * @svgId 绘画到哪个ID上
     * @status 状态码
     */
    function d3CircleUtil(innerRidus, outerRidus, circleSVGW, circleSVGH, piedataLeft, svgId, status) {
        //创建弧生成器
        var arcGenerator = d3.svg.arc()
                .innerRadius(innerRidus)
                .outerRadius(outerRidus);

        //定义SVG的宽高
        var svg1 = d3.select(svgId)
                .append("svg")
                .attr("width", circleSVGW)
                .attr("height", circleSVGH);

        //添加G标签，移动到中心位置
        var backGroundDataSet = [{startAngle: 0, endAngle: Math.PI * 2}];//定义背景圆
        var arcs = svg1.selectAll("g")
                .data(backGroundDataSet)
                .enter()
                .append("g")
                .attr("transform", "translate(" + circleSVGW / 2 + "," + circleSVGH / 2 + ")");

        arcs.append("path")
                .style("fill", "#203974")
                .attr("d", function (d) {
                    return arcGenerator(d);
                });

        //绘制占比
        arcs.append("path")
                .data(piedataLeft)
                .attr("fill", status == COMPANINDICATOR_30 ? "#D16548" : "#3D5DE2")
                .attr("d", function (d) {
                    return arcGenerator(d);
                })
                .transition()
                .delay(function (d, i) {
                    return i * 400;
                })
                .duration(2000)
                .ease("linear")
                .attrTween('d', function (d) {
                    var i = d3.interpolate(d.startAngle, d.endAngle);
                    return function (t) {
                        d.endAngle = i(t);
                        return arcGenerator(d);
                    }
                });
    }

    function del_ff(elem) {
        var elem_child = elem.childNodes;
        for (var i = 0; i < elem_child.length;) {
            if (elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)) {
                elem.removeChild(elem_child[i])
            }
            else {
                i++;
            }
        }
    }


</script>

css

 <style type="text/css">
        /*  body, html, #allmap {
              width: 100%;
              height: 100%;
              overflow: hidden;
              margin: 0;
              font-family: "微软雅黑";
          }*/

        #container {
            width: 100%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
        }

        .empty {
            width: 100%;
            height: 110px;
            background: #B97A57;
        }

        .tab {
            width: 100%;
            height: 50px;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background: #000d38;
        }

        .tab_flag {
            width: 49%;
            height: 3px;
            line-height: 3px;
            text-align: center;
            position: relative;
        }

        .tab_bar_inner {
            background: red;
            height: 3px;
            width: 55%;
            line-height: 3px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .choseSpan {
            width: 49%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: red;
        }

        .nochoseSpan {
            width: 49%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: white;
        }

        .swiper-container {
            width: 100%;
            height: 150px;
        }

        .tab_circle {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
        }

        .circle {
            width: 100%;
            height: 130px;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            justify-content: center;
        }

        .circle-left {
            flex: 1;
            height: 130px;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            justify-content: center;
        }

        .circle-Right {
            flex: 1;
            height: 130px;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            justify-content: center;
        }


    </style>

html

<body>

<div id="container">
    <div class="empty">

    </div>
    <div class="empty">

    </div>
    <div class="empty">

    </div>
    <div class="empty">

    </div>
    <div class="empty">

    </div>


    <div class="tab" id="title">
        <span class="choseSpan" onclick="swiperClick(0)">分类1</span>
        <span class="nochoseSpan" onclick="swiperClick(1) ">分类2</span>
    </div>
    <div class="tab_flag" id="tab_flag">
        <div class="tab_bar_inner"></div>
    </div>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide tab_circle">
                <div class="circle">
                    <div class="circle-left" id="brandLeft01">

                    </div>
                    <div class="circle-Right" id="brandLeft02">

                    </div>
                </div>
                Slide 1
            </div>
            <div class="swiper-slide tab_circle">
                <div class="circle">
                    <div class="circle-left" id="brandLeft03">

                    </div>
                    <div class="circle-Right" id="brandLeft04">

                    </div>
                </div>
                Slide 2
            </div>
        </div>
    </div>
    <!--swipe-->

</div>

</body>

APICloud 左右滑动部分超出屏幕高度解决方案

超出屏幕高度它页面不会滚动

定义数据源

开始画圆

初始化swiper

点击标题切换页面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

APIcloud