小程序开发,6行代码实现微信小程序页面返回顶部效果
发布于 4 年前 作者 vzhao 859 次浏览 来自 分享
wxml部分
with-animation='true' scroll-top='{{ topNum }}'>
 <view>1view>

<view>1view> <view>1view> <view>1view> <view>1view> <view>1view> <view>1view> <view>1view> <view>1view> <view>1view> scroll-view> <view class=‘top’ catchtap=‘returnTop’>顶部view>

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; } js部分: Page({ data: { topNum: 0 },

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

1 回复

自带就行了 自定义的除非内容多

回到顶部