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(' '); } 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(' '); } 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>