ios学习笔记

trade_status和trade_status2在ios的差别
1.使用document绑定滑动页面不会很流畅，他会带有浏览器滚动的效果
2.使用元素绑定scroll，滑动非常流畅，应该是调用了原生的效果

trade_status.js

/**
 * Created by huyaozong on 2016-8-1.
 */
var PORTFOLIO_ID;
//窗口高度，下拉计数,判断有无数据
var winH = 0, myPage = 1, gData = 1;
var isScroll = true,
    $myBox = $('#myBox'),
    $pullUp = $myBox.find('.pullUp');

$(document).ready(function () {

    winH = $(window).height();
    $myBox.height(winH);
    // PORTFOLIO_ID = $.getUrlParameter('portfolioId');

    Trading(1, false);

});


//是否订阅
function IsSubscribe() {

   
    function CallBack(resp) {
        var mydata = resp.data;
        //1普通产品,//2安盈尊享
        if (mydata.portfolioType === 2) {
            //已经订阅
            if (mydata.isSub === 1 && gData > 0) {
                $('#showTip').hide();
            } else if (mydata.isSub === 0 && gData > 0) {
                //订阅提示
                LoginType(function (status, resp) {
                    if (status) {
                        var arr = [];
                        if (resp.portfolioid != null) {
                            arr.push(resp.portfolioid);
                        }

                        if (resp.productlist != null) {
                            arr.push(resp.productlist.split(','));
                            arr = arr.concat.apply([], arr);
                        }

                        //默认显示
                        $('#showTip').show();
                        $.each(arr, function (i, val) {
                            //如果是用户自己则隐藏
                            if (val == PORTFOLIO_ID) {
                                $('#showTip').hide();
                            }
                        });

                    } else {
                        $('#showTip').show();
                        $('#showTip i').on('click', function () {
                            $(this).parents('.showTip').hide();
                        });
                    }
                });
            }

        } else if (mydata.portfolioType === 1) {
            $('#showTip').hide();
        }

        PopupDestroy();

    }


}


//交易动态
function Trading(num, boolean) {


        var datas = {
            afterPosition:0,
            beforePosition:0.0121,
            costPrice:10.36,
            delayFlag:1,
            earnFare:"0.04",
            oprDate:"2016-06-23",
            oprId:null,
            oprResult:"清仓",
            oprTime:"09:57:26",
            oprType:1,
            reason:"1、该股股价快速上涨有调整需求，建议逢高出局，仅供参考。（止盈） 2、该股股价短期走弱，建议出局，仅供参考。（止损）",
            stockCode:"600356",
            stockName:"恒丰纸业"
        };
        var sHtml = '';

       

            for (var i = 0, len = 10; i < len; i++) {
                sHtml += '<div class="jyBox">';
                sHtml += '<ul class="changList jy_list">';
                sHtml += '<li class="navinfo clear"><div><p>股票名称</p></div><div><p>操作</p></div><div><p>成交价/日期</p></div><div><p>仓位变动</p></div></li>';
                sHtml += '<li class="clear">';
                sHtml += '<div><p>' + datas.stockName + '</p><p>' + datas.stockCode + '</p></div>';
                sHtml += '<div><p><span class="yellowBox">' + datas.oprResult + '</span></p><p>' + datas.oprTime.substring(0, datas.oprTime.lastIndexOf(':')) + '</p></div>';
                sHtml += '<div><p><span>' + datas.costPrice + '</span></p><p>' + datas.oprDate + '</p></div>';

                //只有清仓才判断盈利还是亏损
                if (datas.earnFare !== '' && Number(datas.earnFare) > 0) {
                    sHtml += '<div><p class="prolit">' + DecimaltoFixed(datas.beforePosition) + '<span class="redA"></span>' + DecimaltoFixed(datas.afterPosition) + '</p>';
                    sHtml += '<p class="prolit">盈利' + DecimaltoFixed(datas.earnFare) + '%</p></div>';
                } else if (datas.earnFare !== '' && Number(datas.earnFare) < 0) {
                    sHtml += '<div><p class="loss">' + DecimaltoFixed(datas.beforePosition) + '<span class="greenA"></span>' + DecimaltoFixed(datas.afterPosition) + '</p>';
                    sHtml += '<p class="loss">亏损' + DecimaltoFixed(datas.earnFare) + '%</p></div>';
                } else {
                    sHtml += '<div><p class="">' + DecimaltoFixed(datas.beforePosition) + '<span class="blackA"></span>' + DecimaltoFixed(datas.afterPosition) + '</p>';
                }

                sHtml += '</li>';
                sHtml += '</ul>';
                sHtml += '<div class="op_reason">';
                sHtml += '<div class="reasonTxt">';
                sHtml += '<h2>操作理由</h2>';
                if (datas.reason !== null) {
                    sHtml += '<p>' + datas.reason + '</p>';
                } else {
                    sHtml += '<p>无</p>';
                }

                sHtml += '</div>';
                sHtml += '</div>';
                sHtml += '</div>';
            }

            $('#trade-list').append(sHtml);


            //当数据小于10代表下次没数据了
            if (datas.length < 10) {
                gData = 0;
                $pullUp.html('<span>没有更多数据了</span>');
                $myBox.off('scroll');
            } else {
                if ($('#trade-list').height() > winH - 51) {
                    PullUpAction();
                }
                $pullUp.html('&nbsp');
            }


        isScroll = true;

        if (boolean) {
            IsSubscribe();
        } else {
            // PopupDestroy();
        }

}


//上拉加载
function PullUpAction() {

    $myBox.off('scroll').on('scroll', function () {

        if ($pullUp.offset().top <= $myBox.height()) {
            console.log('111');
            if (isScroll) {
                isScroll = false;
                myPage++;
                Trading(myPage);
            }

        }

    });
}


//小数保留两位
function DecimaltoFixed(num) {
    return (parseFloat(num) * 100).toFixed(2);
}

 

trade_status2.js

/**
 * Created by huyaozong on 2016-8-1.
 */
var PORTFOLIO_ID;
//窗口高度，下拉计数,判断有无数据
var winH = 0, myPage = 1, gData = 1;
var isScroll = true,
    $myBox = $('#myBox'),
    $pullUp = $myBox.find('.pullUp');

$(document).ready(function () {

    // winH = $(window).height();
    // $myBox.height(winH);
    // PORTFOLIO_ID = $.getUrlParameter('portfolioId');

    Trading(1, false);

});


//是否订阅
function IsSubscribe() {

    

    function CallBack(resp) {
        var mydata = resp.data;
        //1普通产品,//2安盈尊享
        if (mydata.portfolioType === 2) {
            //已经订阅
            if (mydata.isSub === 1 && gData > 0) {
                $('#showTip').hide();
            } else if (mydata.isSub === 0 && gData > 0) {
                //订阅提示
                LoginType(function (status, resp) {
                    if (status) {
                        var arr = [];
                        if (resp.portfolioid != null) {
                            arr.push(resp.portfolioid);
                        }

                        if (resp.productlist != null) {
                            arr.push(resp.productlist.split(','));
                            arr = arr.concat.apply([], arr);
                        }

                        //默认显示
                        $('#showTip').show();
                        $.each(arr, function (i, val) {
                            //如果是用户自己则隐藏
                            if (val == PORTFOLIO_ID) {
                                $('#showTip').hide();
                            }
                        });

                    } else {
                        $('#showTip').show();
                        $('#showTip i').on('click', function () {
                            $(this).parents('.showTip').hide();
                        });
                    }
                });
            }

        } else if (mydata.portfolioType === 1) {
            $('#showTip').hide();
        }

        PopupDestroy();

    }


}


//交易动态
function Trading(num, boolean) {


        var datas = {
            afterPosition:0,
            beforePosition:0.0121,
            costPrice:10.36,
            delayFlag:1,
            earnFare:"0.04",
            oprDate:"2016-06-23",
            oprId:null,
            oprResult:"清仓",
            oprTime:"09:57:26",
            oprType:1,
            reason:"1、该股股价快速上涨有调整需求，建议逢高出局，仅供参考。（止盈） 2、该股股价短期走弱，建议出局，仅供参考。（止损）",
            stockCode:"600356",
            stockName:"恒丰纸业"
        };

        var sHtml = '';

            for (var i = 0, len = 10; i < len; i++) {
                sHtml += '<div class="jyBox">';
                sHtml += '<ul class="changList jy_list">';
                sHtml += '<li class="navinfo clear"><div><p>股票名称</p></div><div><p>操作</p></div><div><p>成交价/日期</p></div><div><p>仓位变动</p></div></li>';
                sHtml += '<li class="clear">';
                sHtml += '<div><p>' + datas.stockName + '</p><p>' + datas.stockCode + '</p></div>';
                sHtml += '<div><p><span class="yellowBox">' + datas.oprResult + '</span></p><p>' + datas.oprTime.substring(0, datas.oprTime.lastIndexOf(':')) + '</p></div>';
                sHtml += '<div><p><span>' + datas.costPrice + '</span></p><p>' + datas.oprDate + '</p></div>';

                //只有清仓才判断盈利还是亏损
                if (datas.earnFare !== '' && Number(datas.earnFare) > 0) {
                    sHtml += '<div><p class="prolit">' + DecimaltoFixed(datas.beforePosition) + '<span class="redA"></span>' + DecimaltoFixed(datas.afterPosition) + '</p>';
                    sHtml += '<p class="prolit">盈利' + DecimaltoFixed(datas.earnFare) + '%</p></div>';
                } else if (datas.earnFare !== '' && Number(datas.earnFare) < 0) {
                    sHtml += '<div><p class="loss">' + DecimaltoFixed(datas.beforePosition) + '<span class="greenA"></span>' + DecimaltoFixed(datas.afterPosition) + '</p>';
                    sHtml += '<p class="loss">亏损' + DecimaltoFixed(datas.earnFare) + '%</p></div>';
                } else {
                    sHtml += '<div><p class="">' + DecimaltoFixed(datas.beforePosition) + '<span class="blackA"></span>' + DecimaltoFixed(datas.afterPosition) + '</p>';
                }

                sHtml += '</li>';
                sHtml += '</ul>';
                sHtml += '<div class="op_reason">';
                sHtml += '<div class="reasonTxt">';
                sHtml += '<h2>操作理由</h2>';
                if (datas.reason !== null) {
                    sHtml += '<p>' + datas.reason + '</p>';
                } else {
                    sHtml += '<p>无</p>';
                }

                sHtml += '</div>';
                sHtml += '</div>';
                sHtml += '</div>';
            }

            $('#trade-list').append(sHtml);


            //当数据小于10代表下次没数据了
            if (datas.length < 10) {
                gData = 0;
                $pullUp.html('<span>没有更多数据了</span>');
                $myBox.off('scroll');
            } else {
                if ($('#trade-list').height() > winH - 51) {
                    PullUpAction();
                }
                $pullUp.html('&nbsp');
            }


        isScroll = true;

        if (boolean) {
            IsSubscribe();
        } else {
            // PopupDestroy();
        }

}


//上拉加载
function PullUpAction() {

    $(document).off("scroll").on("scroll", function () {
        var $docm = $(document);
        var actionH = $docm.scrollTop() + $(window).height();

        if (actionH === $docm.height()) {
            myPage++;
            Trading(myPage);
        }
        
    });
}


//小数保留两位
function DecimaltoFixed(num) {
    return (parseFloat(num) * 100).toFixed(2);
}

 

html

<!DOCTYPE html>
<html>
<head>
<title>最新调仓</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- HTTP 1.1 -->
  <meta http-equiv="pragma" content="no-cache" />
  <!-- HTTP 1.0 -->
  <meta http-equiv="cache-control" content="no-cache" />
  <!-- Prevent caching at the proxy server -->
  <meta http-equiv="expires" content="0" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/base-min.css" rel="stylesheet" media="all" />
<link href="css/tradeshow.css" rel="stylesheet" media="all" />
  <style>
    .changList li div{
      margin-right: 0;/*修复数字偏左问题*/
    }
  </style>
</head>
<body>
<div class="mainBox" id="myBox" style="position: relative;">
  <div class="showTip" id="showTip" style="display: none;">您未订阅该组合，仅展示7日前交易动态！<i></i></div>
  <div class="tra_intro statusBox" >
      <div class="tra_jy newTra" id="trade-list">
        <!--<div class="jyBox">-->
          <!--<ul class="changList jy_list">-->
            <!--<li class="navinfo clear"><div><p>股票名称</p></div><div><p>操作</p></div><div><p>成交价/日期</p></div><div><p>仓位变动</p></div></li>-->
            <!--<li class="clear">-->
              <!--<div><p>华远地产</p><p>600734.SH</p></div>-->
              <!--<div><p><span class="yellowBox">清仓</span></p><p>14:41</p></div>-->
              <!--<div><p><span>91.08</span></p><p>2015-10-06</p></div>-->
              <!--<div><p class="loss">25.17<span class="greenA"></span>0.00</p><p class="loss">盈利-0.2257%</p></div>-->
            <!--</li>-->
          <!--</ul>-->
          <!--<div class="op_reason">-->
            <!--<div class="reasonTxt">-->
            <!--<h2>操作理由</h2>-->
            <!--<p>1、基本面分析基本面板分析基本面斑分析；</p>-->
            <!--<p>2、技术分析技术分析技术分析技术分析技术分析；</p>-->
            <!--<p>3、大盘走大盘走势大盘走势大盘走势大盘走大盘……</p>-->
            <!--<p>4、大盘走大盘走势大盘走势大盘走势大盘走大盘……</p>-->
            <!--<p>5、大盘走大盘走势大盘走势大盘走势大盘走大盘……</p>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="op_show">展开<i></i></div>-->
        <!--</div>-->
        <!--<div class="jyBox">-->
          <!--<ul class="changList jy_list">-->
            <!--<li class="navinfo clear"><div><p>股票名称</p></div><div><p>操作</p></div><div><p>成交价</p></div><div><p>仓位变动</p></div></li>-->
            <!--<li class="clear">-->
              <!--<div><p>华远地产</p><p>600734.SH</p></div>-->
              <!--<div><p><span class="yellowBox">清仓</span></p><p>14:41</p></div>-->
              <!--<div><p><span>91.08</span></p></div>-->
              <!--<div><p class="prolit">25.17<span class="redA"></span>0.00</p><p class="loss">盈利-0.2257%</p></div>-->
            <!--</li>-->
          <!--</ul>-->
          <!--<div class="op_reason">-->
            <!--<div class="reasonTxt">-->
            <!--<h2>操作理由</h2>-->
            <!--<p>1、基本面分析基本面板分析基本面斑分析；</p>-->
            <!--<p>2、技术分析技术分析技术分析技术分析技术分析；</p>-->
            <!--<p>3、大盘走大盘走势大盘走势大盘走势大盘走大盘……</p>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="op_show">展开<i></i></div>-->
        <!--</div>-->

  </div>
    <div class="blank pullUp"></div>
</div>
</div>

<script src="js/jquery.js"></script>
<!-- <script src="/common/js/public.js"></script> -->
 <!-- <script src="js/trade_status.js"></script> -->
 <script src="js/trade_status2.js"></script>
<script type="text/javascript">
//    $(document).ready(function(){
//      for(var i=0; i<$('.op_reason').length; i++) {
//        if($('.op_reason').eq(i).find('.reasonTxt').height()>86) {
//            $('.op_reason').eq(i).next('.op_show').show();
//          }
//      }
//      $('.op_show').on('click',function(){
//
//          if($(this).hasClass('close')){
//            $(this).prev('div').css('height','86px');
//            $(this).html('展开<i></i>');
//            $(this).removeClass('close');
//          } else {
//            $(this).prev('div').css('height','auto');
//            $(this).html('收起<i></i>');
//            $(this).addClass('close');
//          }
//
//      })
//      $('.tra_operate').on('click',function(){
//          changeURL('optrade.html');
//      })
//    })
</script>
</body>
</html>