大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要为大家展示了“如何实现微信小程序页面返回顶部效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现微信小程序页面返回顶部效果”这篇文章吧。
创新互联是一家专业提供汤阴企业网站建设,专注与成都做网站、网站建设、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; }
以上是“如何实现微信小程序页面返回顶部效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!