| | |
|---|
| | | overflow:scroll; |
|---|
| | | height: 80vh; |
|---|
| | | } |
|---|
| | | .box |
|---|
| | | { |
|---|
| | | 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 style="padding-top:30px"> |
|---|
| | | |
|---|
| | | <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> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | |
|---|
| | | }).done(function(res){ |
|---|
| | | _config.jumpGoodsUrl(res.data,_this.platid); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | touch:function() |
|---|
| | | { |
|---|
| | | const box = document.querySelector('.box') |
|---|
| | | const list = document.querySelector('.list'); |
|---|
| | | // 按下屏幕的位置 |
|---|
| | | let touchStartPosition = 0 |
|---|
| | | |
|---|
| | | // touchstart事件 |
|---|
| | | box.addEventListener('touchstart', function (e) { |
|---|
| | | 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 |
|---|
| | | }) |
|---|
| | | // 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) |
|---|
| | | } |
|---|
| | | },1) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | scrollLoad: function() { |
|---|
| | | // |
|---|
| | |
|---|
| | | this.getCateList(); |
|---|
| | | this.cateRender(); |
|---|
| | | this.scrollLoad(); |
|---|
| | | this.touch(); |
|---|
| | | // this.getDateNow(); |
|---|
| | | //this.getGoodsList(); |
|---|
| | | // this.getNowTime(); |
|---|
