微信小程序> 微信小程序---6行代码实现页面返回顶部

微信小程序---6行代码实现页面返回顶部

浏览量:2881 时间: 来源:豆i浆

效果预览:
小程序

js部分:

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

wxml部分:

<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'>  <view>1</view>  <view>1</view>  <view>1</view>  <view>1</view>  <view>1</view>  <view>1</view>  <view>1</view>  <view>1</view>  <view>1</view>  <view>1</view></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;}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎