全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[丽江seo公司首推久澳]微信小程序实现回到顶部效果

  本篇文章介绍了微信小程序实现点击回到顶部的效果实现,具有一定的参考价值,23 2020.10 [SEO优化外包公司哪家好]小程序开发破解教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像◇▼▪,可以在新开的,希望对学习微信小程序开发的朋友有帮助!
 

  微信小程序实现回到顶部效果

  这里小程序有个组件是可以实现的△□,那就是scroll-view组件,他具有很多的属性,咸阳市小程序制作公司其中我们要利用到以下两个属性来处理:

  

 

  scroll-top Number 设置竖向滚动条位置

  bindscroll EventHandle 滚动时触发•▼,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth-□•, deltaX, deltaY}

  

 

  通过滚动触发事件,获取距离文档顶部的scrollTop值,德惠市小程序制作公司当达到一定条件【>300】的时候,显示gotop层,针对这个层写点击事件=◆,重新设置scroll-top值,偶然间发现设置scroll-top的一个bug,如果我下一次设置的值和本次scroll-top值是一样的○◇•,那么文档并不会有任何动作•▲。[丽江seo公司首推久澳]因此我的做法是在0和1之间切换设置,具体做法如下:

  推荐学习:小程序开发教程

  

<scroll-view style="height: 100%▷▪-▽;"▪…◆; scroll-y="true" scroll-top="▼•▲;{{scrollTop□▲.scroll_top}}" bindscroll="scrollTopFun"> 
<view style="height: 11111rpx; border: solid 1px red=▲●;"-☆☆•;> 
123456 
----{{test}} 
</view>●☆; 
</scroll-view> 

<view style="○▪▷…;position☆■: absolute=■●▽; bottom: 50rpx; right: 30rpx; width•▲: 120rpx; height: 120rpx; border: solid 1px green;" wx▽▽◇•:if="◇■;{{scrollTop.goTop_show}}" catchtap="goTopFun">☆●;<★□☆;/view>▪△☆;

 

  JS:

  

Page({
 data: {
 test★●◁: "",
 scrollTop▼◁•▲: {
 scroll_top: 0,
 goTop_show……•▽: false
 }
 }•▽•△,
 scrollTopFun: function (e) {
 console.log(e.detail);
 if (e.detail.scrollTop > 300) {//触发gotop的显示条件 
 this◁•.setData({
 'scrollTop.goTop_show'■●;■▪▼: true
 });
 console.log(this•◁★.data.scrollTop)
 } else {
 this.setData({
 'scrollTop▷▷▼■.goTop_show'□▪;…★: false
 });
 }
 }☆★,
 goTopFun: function (e) {
 var _top = this.data•▪.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样◁…-,否则无效,所以这里加了个判断 
 if (_top == 1) {
 _top = 0★•;
 } else {
 _top = 1;
 }
 this.setData({
 'scrollTop•▼○◇.scroll_top'△▷◆: _top
 });
 console▼☆★.log("○☆;----");
 console.log(this.data◇▽=.scrollTop)
 }
})

 

  最终效果如下:
 

  更多小程序开发教程,请关注PHP中文网▲■!合山市小程序开发哪家好

  以上就是微信小程序实现回到顶部效果的详细内容,更多请关注久澳传媒编程栏目其它相关文章•○!

[丽江seo公司首推久澳]微信小程序实现回到顶部效果

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。