| | |
| | | position: absolute; |
| | | font-size: 0.25rem; |
| | | border-radius: 0.2rem; |
| | | top: 0.4rem; |
| | | top: 0.65rem; |
| | | right: 0.4rem; |
| | | width: 1.3rem; |
| | | text-align: center; |
| | |
| | | font-size: .35rem; |
| | | color: #fff; |
| | | } |
| | | .appback-img |
| | | { |
| | | position: absolute; |
| | | top: 0.6rem; |
| | | z-index: 999; |
| | | width: 0.6rem; |
| | | left: 0.3rem; |
| | | } |
| | | |
| | | .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%; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body style="background: #f5f5f9; margin: 0px;font-size: 0;"> |
| | | |
| | | <div class="box"> |
| | | <div class="list"> |
| | | <div id="inviteact"> |
| | | <div v-if="loading" class="loading">{{loadingTxt}}</div> |
| | | <image v-on:click="topBack()" class="appback-img" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/h5return_backIcon.png"></image> |
| | | <div class="act_po"> |
| | | <div class="gzbtn" v-on:click="showgz()">活动规则</div> |
| | | <image class="com_img" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/act_invite_230717_01.png"></image> |
| | |
| | | <image style="width: 70%;" src="https://yanfeiobpub.obs.cn-east-3.myhuaweicloud.com/dfg/invite_btn.png"></image> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | ranklist:[] |
| | | }, |
| | | methods:{ |
| | | topBack:function() |
| | | { |
| | | uni.postMessage({ |
| | | data: { |
| | | action: 'back' |
| | | } |
| | | }); |
| | | }, |
| | | closegz:function() |
| | | { |
| | | this.showType=false; |
| | |
| | | } |
| | | |
| | | }) |
| | | } |
| | | }, |
| | | 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>=110) |
| | | { |
| | | return; |
| | | } |
| | | 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) |
| | | } |
| | | }) |
| | | }, |
| | | }, |
| | | mounted:function(){ |
| | | this.getActivity(); |
| | | this.touch(); |
| | | } |
| | | }) |
| | | </script> |