最近有这样的一个功能，我们需要左右滑动的部分超出了屏幕的高度了。最开始想的是采用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>
