| | |
| | | a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:transparent;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{font-family:Arial,PingFang SC,-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none} |
| | | .list-container{ |
| | | position: relative; |
| | | padding-top: 10px; |
| | | padding-top: 30px; |
| | | } |
| | | .top-bg{ |
| | | width: 100%;position: absolute;top:0; |
| | |
| | | position:absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url(https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5loading.gif) no-repeat fixed top; |
| | | background-size: 70px 70px; |
| | | } |
| | | .list{ |
| | | position: relative; |
| | | top: 0; |
| | | width: 100%; |
| | | } |
| | | .reloadbg |
| | | { |
| | | display: flex; |
| | | justify-content: center; |
| | | height: 1.3rem; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body> |
| | | <div class="box"> |
| | | |
| | | <!-- <div class="reloadbg"> |
| | | <image class="reloadbgimg" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5loading.gif"></image> |
| | | </div> |
| | | --> |
| | | <div class="list"> |
| | | |
| | | |
| | | <img src="https://jpdy.ffquan.cn/static/header_bg.12963398.png" class="top-bg" alt=""> |
| | | |
| | | <div class="list-container" id="fqList"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | ss:0, |
| | | cid:0, |
| | | type:1, |
| | | //posturl:'http://dfg.shop.com', |
| | | // posturl:'http://dfgapp.ushopvip.com', |
| | | posturl:'http://appapitest.ushopvip.com', |
| | | //posturl:'http://dfg.shop.com', |
| | | posturl:'http://dfgapp.ushopvip.com', |
| | | // posturl:'http://appapitest.ushopvip.com', |
| | | platlist:[ |
| | | { |
| | | id:"tb", |
| | |
| | | touch:function() |
| | | { |
| | | const box = document.querySelector('.box') |
| | | const list = document.querySelector('.list') |
| | | const list = document.querySelector('.list'); |
| | | // 按下屏幕的位置 |
| | | let touchStartPosition = 0 |
| | | |
| | | // touchstart事件 |
| | | box.addEventListener('touchstart', function (e) { |
| | | let touch = e.touches[0] |
| | | touchStartPosition = touch.pageY |
| | | // console.log(touchStartPosition) |
| | | let touch = e.touches[0] |
| | | touchStartPosition = touch.pageY |
| | | }) |
| | | // touchmove事件 |
| | | box.addEventListener('touchmove', function (e) { |
| | | let touch = e.touches[0] |
| | | // 列表的top值等于列表相对于box的偏移量+滑动的距离 |
| | | let pySize= list.offsetTop + touch.pageY - touchStartPosition; |
| | | if(pySize<0) |
| | | { |
| | | return; |
| | | } |
| | | var scroll = document.getElementsByClassName('contscore') |
| | | var srollPos = $('.contscore').scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) |
| | | if(srollPos>0) |
| | | { |
| | | return; |
| | | } |
| | | list.style.top =pySize + 'px'; |
| | | // 实现平滑的滑动 |
| | | touchStartPosition = touch.pageY |
| | | |
| | | let touch = e.touches[0] |
| | | // 列表的top值等于列表相对于box的偏移量+滑动的距离 |
| | | let pySize= list.offsetTop + touch.pageY - touchStartPosition; |
| | | if(pySize<0) |
| | | { |
| | | return; |
| | | } |
| | | var scroll = document.getElementsByClassName('contscore') |
| | | var srollPos = $('.contscore').scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) |
| | | if(srollPos>0) |
| | | { |
| | | return; |
| | | } |
| | | list.style.top =pySize + 'px'; |
| | | // 实现平滑的滑动 |
| | | touchStartPosition = touch.pageY |
| | | }) |
| | | // touchend事件 |
| | | box.addEventListener('touchend', function (e) { |
| | | let top = list.offsetTop |
| | | if (top > 70) { |
| | | // 在此处调用刷新后的回调 |
| | | console.log('刷新'); |
| | | location.reload(); |
| | | } |
| | | if(top<0) |
| | | { |
| | | list.style.top=0; |
| | | } |
| | | if (top > 0) { |
| | | // 通过定时器平滑的将list的top = 0 |
| | | let timer = setInterval(() => { |
| | | top=top-5; |
| | | list.style.top = top + 'px' |
| | | if (top <= 0) { |
| | | list.style.top=0; |
| | | clearInterval(timer) |
| | | let top = list.offsetTop |
| | | if (top > 70) { |
| | | // 在此处调用刷新后的回调 |
| | | console.log('刷新'); |
| | | location.reload(); |
| | | } |
| | | },1) |
| | | } |
| | | if(top<0) |
| | | { |
| | | list.style.top=0; |
| | | } |
| | | if (top > 0) { |
| | | // 通过定时器平滑的将list的top = 0 |
| | | let timer = setInterval(() => { |
| | | top=top-5; |
| | | list.style.top = top + 'px' |
| | | if (top <= 0) { |
| | | list.style.top=0; |
| | | clearInterval(timer) |
| | | } |
| | | },1) |
| | | } |
| | | }) |
| | | }, |
| | | scrollLoad: function() { |