需求描述：如下图，四部分呈响应式关联------
第1部分： 年龄的下拉选，范围为输入年龄+1至105岁；
第2部分：接口返回数据的动态展示；
第3部分：加减号控制在可允许展示年龄里的加1或减1；
第4部分：滑块可左右拖动引起展示数据、年龄下拉选的变化和自身偏移量的变化。
HTML部分：
<!--② 万能账户“是否加入”选择“是”，显示如下内容： -->
<div style="100%;" ng-show="insureParams.isUniversalAccount ==1">
<div style="margin: 20px 3% 0;">
<div
style="background-image: linear-gradient(to right,#1566F5,#15BBFA);100%;position: relative; border-radius: 5px;">
<img style="60px;position: absolute;top:-26%;left:-3.3%;" src="./img/annuity/img.png"
alt="">
<div>
<div
style="color: #f6f5f5;display: flex;justify-content: space-around;align-items: center;70%;margin:0 auto; padding:10px 0;">
<div>转入万能</div>
<div style="5px;height:5px;border-radius: 50%;background-color: #f6f5f5;">
</div>
<div>灵活领取</div>
<div style="5px;height:5px;border-radius: 50%;background-color: #f6f5f5;">
</div>
<div>保值增值</div>
</div>
<div
style="font-size: 12px;color: #f6f5f5;margin:0 auto ;85%;padding-bottom:10px;text-align: center;">
合同生效满5年后，在每个保单周年日零时生存即可选择现金领取或转入万能领取</div>
</div>
</div>
</div>
<div style="background-color: #FEF1BB;margin:0 3%; margin:10px 0;">
<div
style="display: flex;justify-content: flex-start;border-bottom:1px solid #999;align-items: center;">
<div style="margin-left: 4%; margin-top: 5px;"><img src="./img/annuity/icon1.png" alt=""
style="30px;"></div>
<div style="margin-left:3%;font-size:14px;">
{{dataArr.ageStart}}周岁开始至60周岁前，关爱金每年转入万能账户{{dataArr.careCashEach}}元，累计转入万能账户{{dataArr.careCashSum}}元
</div>
</div>
<div
style="display: flex;justify-content: flex-start;border-bottom:1px solid #999;align-items: center;">
<div style="margin-left: 4%; margin-top: 5px;"><img src="./img/annuity/icon1.png" alt=""
style="30px;"></div>
<div style="margin-left:3%;font-size:14px;">{{dataArr.ageStart}}周岁开始至80周岁，
生存金每年转入万能账户{{dataArr.careCashSum}}元，累计转入万能账户{{dataArr.careCashSum}}元
</div>
</div>
<div
style="display: flex;justify-content: flex-start;border-bottom:1px solid #999;align-items: center;">
<div style="margin-left: 4%; margin-top: 5px;"><img src="./img/annuity/icon1.png" alt=""
style="30px;"></div>
<div style="margin-left:3%;font-size:14px;">80岁后首个保单周年日零时满期金转入万能账户{{insureParams.priceS}}元
</div>
</div>
<div
style="display: flex;justify-content: flex-start;border-bottom:1px solid #999;align-items: center;">
<div style="margin-left: 4%; margin-top: 5px;"><img src="./img/annuity/icon1.png" alt=""
style="30px;"></div>
<div style="margin-left:3%;font-size:14px;">身故赔付:{{dataArr.deathCash[ageNum]}}元</div>
</div>
<div
style="display: flex;justify-content:flex-start;border-bottom:1px solid #999;align-items: center;">
<div style="margin-left: 4%; margin-top: 5px;"><img src="./img/annuity/icon1.png" alt=""
style="30px;"></div>
<div style="margin-left:3%;font-size:14px;">{{ageNum}}周岁年金现金价值{{dataArr.cashValue[ageNum]}}元
</div>
</div>
<div
style="display: flex;justify-content:flex-start;border-bottom:1px solid #999;align-items: center;">
<div style="margin-left: 4%; margin-top: 5px;"><img src="./img/annuity/icon1.png" alt=""
style="30px;"></div>
<div style="margin-left:3%;font-size:14px;">{{ageNum}}周岁价值{{dataArr.cashValue[ageNum]}}元
</div>
</div>
</div>
</div>
<!-- 左右滑动轴 -->
<div>
<div style="display: flex; justify-content: space-around;">
<div ng-click="reduce()" style="margin-left:10%;"><img style="14px;" src="./img/annuity/jianhao.png" alt=""></div>
<ul class="lanren">
<li>
<div class="scale_panel">
<div class="scale" id="bar">
<div id="shadowWidth" class="blueShadow"></div>
<span id="btn"></span>
</div>
</div>
</li>
</ul>
<div ng-click="add()" style="margin-right:10%;"><img style="14px;" src="./img/annuity/jiahao.png" alt=""></div>
</div>
<div class="barpro" id="mask">拖动按钮查看不同年龄段的利益保单</div>
</div>
JS部分：
//选择年龄
$scope.currentAge = '';
$scope.openAgePicker = function () {
weui.picker($scope.ageArr, {
onConfirm: function (result) {
for (var i = 0; i < $scope.ageArr.length; i++) {
if (result[0] == $scope.ageArr[i]) {
$scope.currentAge = result[0].value;
$scope.ageNum = $scope.currentAge;
$scope.loadDetail();
$scope.ageNow = $scope.currentAge;
//192为 max = $scope.f.bar.offsetWidth - this.offsetWidth 固定值，（在PC端会有1px的差距，在此处为了实现效果做了近似处理。）
$scope.to = ($scope.currentAge -1 -Number($scope.insureParams.BBRS[0].age))/(105 -Number($scope.insureParams.BBRS[0].age)) * 192;
$scope.f.btn.style.left = ($scope.to) + 'px';
$scope.f.ondrag($scope.to);
$scope.$apply();
}
}
}
})
};
//请求接口
$scope.dataArr = '';
$scope.loadDetail = function () {
$scope.totalPremium = parseFloat((Number($scope.insureParams.premium) + 10)).toFixed(2);
$ionicLoading.show({});
var params = {
token: $scope.insureParams.productToken,
insurance: $scope.insureParams.insurance,
age: $scope.insureParams.BBRS[0].age,
sex: $scope.insureParams.BBRS[0].InsuredSex,
paymentTerm: $scope.insureParams.paymentTerm,
priceS: $scope.insureParams.priceS,
premium: $scope.insureParams.premium,
isUniversalAccount: $scope.insureParams.isUniversalAccount,
};
zytHttp.post("ZYT_TB_067", params, function (data) {
if (data.error.isSuc == '1') {
$ionicLoading.hide({});
$scope.dataArr=data.item;
console.log($scope.dataArr);
}else {
$ionicLoading.hide({});
alert({ type: 'error', title: '错误', msg: data.error.name, foot: '返回重试' });
}
}, function (data) {
$ionicLoading.hide({});
alert({type: 'error', title: '温馨提示', msg: '服务器繁忙，请稍后重试！', foot: '返回重试'});
$scope.$apply();
})
}
//动态表格
var scale = function (btn, bar) {
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.step = this.bar.getElementsByTagName("div")[0];
this.init();
};
$scope.ageNum = '';
$scope.f = '';
$scope.to = Number($scope.insureParams.BBRS[0].age);
scale.prototype = {
init: function () {
$scope.f = this, g = document.getElementsByClassName('lanren')[0], b = window, m = Math;
console.log(document.getElementsByClassName('lanren')[0]);
//判断是PC端还是移动端
if (platformUtil.isPC()) {
$scope.f.btn.onmousedown = function (e) {
var x = (e || b.event).clientX;
var l = this.offsetLeft;
var max = $scope.f.bar.offsetWidth - this.offsetWidth;
g.onmousemove = function (e) {
var thisX = (e || b.event).clientX;
$scope.to = m.min(max, m.max(0, l + (thisX - x))); //滑块划过的左边偏移量
$scope.f.btn.style.left = ($scope.to) + 'px';
$scope.ageNow = $scope.to / (max / (Number(104 - $scope.insureParams.BBRS[0].age))) + Number($scope.insureParams.BBRS[0].age + 1);
$scope.f.ondrag(m.round($scope.ageNow), $scope.to);
$scope.ageNum = m.round($scope.ageNow);
$scope.currentAge = $scope.ageNum;
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
$scope.$apply();
};
g.onmouseup = new Function('this.onmousemove=null');
};
} else {
$scope.f.btn.ontouchstart = function (e) {
var x = (e || b.event).changedTouches[0].clientX; //x 获取事件触发时鼠标距离页面左侧的距离
var l = this.offsetLeft; //l offsetLeft 返回对象相对于父级对象的布局或坐标的left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标
var max = $scope.f.bar.offsetWidth - this.offsetWidth; // offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
g.ontouchmove = function (e) {
var thisX = (e || b.event).changedTouches[0].clientX; //获取事件触发时鼠标距离页面左侧的距离
$scope.to = m.min(max, m.max(0, l + (thisX - x))); //滑块划过的左边偏移量
// console.log('滑块划过的左边偏移量$scope.to' +'-----' + $scope.to);
$scope.f.btn.style.left = ($scope.to) + 'px';
$scope.ageNow = $scope.to / (max / (Number(104 - $scope.insureParams.BBRS[0].age))) + Number($scope.insureParams.BBRS[0].age + 1);
$scope.f.ondrag($scope.to);
$scope.ageNum = m.round($scope.ageNow);
$scope.currentAge = $scope.ageNum;
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
$scope.$apply();
};
g.ontouchend = new Function('this.ontouchmove=null');
};
}
},
ondrag: function (x) {
this.step.style.width = x + 'px';
}
}
new scale('btn', 'bar');
//点击加减号
$scope.reduce = function () {
if ($scope.currentAge > Number($scope.insureParams.BBRS[0].age) + 1) {
$scope.currentAge--;
$scope.ageNum = $scope.currentAge;
$scope.perDis='';
$scope.perDis=192/(105- (Number($scope.insureParams.BBRS[0].age) + 1));
$scope.to -= $scope.perDis;
$scope.f.btn.style.left = ($scope.to) + 'px';
var shadowWidth = document.getElementById('shadowWidth');
shadowWidth.style.width=($scope.to) + "px";
}
}
$scope.add = function () {
$scope.perDis='';
$scope.perDis=192/(105- (Number($scope.insureParams.BBRS[0].age) + 1));
if ($scope.currentAge < 105) {
$scope.currentAge++;
$scope.ageNum = $scope.currentAge;
$scope.to += $scope.perDis;
$scope.f.btn.style.left = $scope.to + 'px';
var shadowWidth = document.getElementById('shadowWidth');
shadowWidth.style.width=($scope.to) + "px";
}
}
CSS部分：
.barpro{
text-align: center;
margin:0 auto;
color: #c9c9c9;
90%;
font-size:12px !important;
}
ul.lanren{
90%;
margin:10px auto;
height: 10px;}
.scale_panel{
color:#999;
200px;
line-height:18px;
margin:0 auto;}
.scale span{
background:url(../img/annuity/huakuai.png) no-repeat;
8px;
height:16px;
position:absolute;
left:-2px;top:-5px;
cursor:pointer;}
.scale{
background-repeat: repeat-x;
background-position: 0 100%;
background-color: #E4E4E4;
border-left: 1px #83BBD9 solid;
200px; height: 3px;
position: relative;
font-size: 0px;
border-radius: 3px; }
.scale div{
background-repeat: repeat-x;
background-color: #3BE3FF;
0px;
position: absolute;
height: 3px;
0;
left: 0;
bottom: 0;
}
.lanren li{
font-size:12px;
line-height:10px;
position:relative;
height:10px;
list-style:none;
}
.g-arrows5:after {
content: " ";
display: inline-block;
height: 10px;
10px;
border- 2px 2px 0 0;
border-color: #c8c8cd;
border-style: solid;
-webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
transform: matrix(.71, .71, -.71, .71, 0, 0);
position: relative;
top: -2px;
position: absolute;
top: 50%;
right: 4px;
margin-top: -4px;
}