大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何实现微信小程序页面返回顶部效果-创新互联

这篇文章主要为大家展示了“如何实现微信小程序页面返回顶部效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现微信小程序页面返回顶部效果”这篇文章吧。

创新互联是一家专业提供汤阴企业网站建设,专注与成都做网站、网站建设、HTML5、小程序制作等业务。10年已为汤阴众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

效果预览:

如何实现微信小程序页面返回顶部效果

js部分:

Page({
 data: {
  topNum: 0
 },

 returnTop: function () {
  this.setData({
   topNum: this.data.topNum = 0
  });
 }
})

wxml部分:


 1
 1
 1
 1
 1
 1
 1
 1
 1
 1


顶部

wxss部分:

page{
 width: 100%;
 height: 100%;
}

scroll-view{
 height: 100%;
 width: 100%;
}

view{
 width: 100%;
 height: 200px;
 text-align: center;
 line-height: 200px;
 font-weight: 600;
}

view:nth-child(odd){
 background-color: red;
}

.top{
 width: 50px;
 height: 50px;
 position: fixed;
 right: 10px;
 bottom: 10px;
 z-index: 1;
 background-color: yellow;
 color: red;
 text-align: center;
 line-height: 50px;
}

以上是“如何实现微信小程序页面返回顶部效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页标题:如何实现微信小程序页面返回顶部效果-创新互联
分享URL:http://dzwzjz.com/article/doiigj.html
在线咨询
服务热线
服务热线:028-86922220
TOP