滑动滑块动态展示表格数据

需求描述：如下图，四部分呈响应式关联------

　　　　　　第1部分：  年龄的下拉选，范围为输入年龄+1至105岁；

　　　　　　第2部分：接口返回数据的动态展示；

　　　　　　第3部分：加减号控制在可允许展示年龄里的加1或减1；

　　　　　　第4部分：滑块可左右拖动引起展示数据、年龄下拉选的变化和自身偏移量的变化。

 

 

 

HTML部分：

<!--②　万能账户“是否加入”选择“是”，显示如下内容： -->
            <div style="width:100%;" ng-show="insureParams.isUniversalAccount ==1">
                <div style="margin: 20px  3% 0;">
                    <div
                        style="background-image: linear-gradient(to right,#1566F5,#15BBFA);width:100%;position: relative; border-radius: 5px;">
                        <img style="width: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;width:70%;margin:0 auto; padding:10px 0;">
                                <div>转入万能</div>
                                <div style="width:5px;height:5px;border-radius: 50%;background-color: #f6f5f5;">
                                </div>
                                <div>灵活领取</div>
                                <div style="width:5px;height:5px;border-radius: 50%;background-color: #f6f5f5;">
                                </div>
                                <div>保值增值</div>
                            </div>
                            <div
                                style="font-size: 12px;color: #f6f5f5;margin:0 auto ;width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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;

  width:90%;

  font-size:12px !important;

  }

ul.lanren{

  width:90%;

  margin:10px auto; 

  height: 10px;}

.scale_panel{

  color:#999;

  width:200px;

  line-height:18px;

  margin:0 auto;}

.scale span{

  background:url(../img/annuity/huakuai.png) no-repeat;

  width: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;

  width: 200px; height: 3px;

  position: relative;

  font-size: 0px;

  border-radius: 3px; }

.scale div{

  background-repeat: repeat-x;

  background-color: #3BE3FF;

  width: 0px;

  position: absolute;

  height: 3px;

  width: 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;

  width: 10px;

  border-width: 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;

}