微信小程序回到顶部,点击滚动到顶部简单易懂!

小程序 专栏收录该内容
31 篇文章 0 订阅

未使用scroll-view的情况

// html
<view bindtap="toTop">回到顶部</view>
<view>内容</view>
//js
page({
		toTop(){
			wx.pageScrollTo({
			    scrollTop: 0
			})
		},
	})

使用scroll-view的情况

// HTML
<view bindtap="toTop">回到顶部</view>
<scroll-view class="scroll_view" scroll-top="{{topNum}}" scroll-y >
内容
</scroll-view>

// js
page({
	data: {
		topNum : 0
	},
	toTop() { // 回到顶部
        this.setData({
            topNum:0
        })
    },
})
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
仿糗事百科微信小程序 1. 实现顶部页签菜单左右滑动效果 2. 实现顶部页签菜单切换效果页签菜单选中时字体加粗同时对应的内容也跟着变化 3. 实现专享界面糗事列表设计包括发布人头像、发布人昵称、发布的段子等信息以列表的显示展现出来。 4. 实现视频列表页设计视频可以进行播放与暂停; 5. 实现分享功能可以将当前界面分享给好友 6.设计概要:数据绑定、列表渲染、请求服务器数据 (1)实现顶部页签滑动效果需要借助于scroll-view可滚动视图区域组件设置scroll-x="true"属性允许在水平方向上左右滑动 (2)页签菜单切换和内容也跟着进行切换需要使用swiper滑块视图容器组件根据current当前页面索引值来决定显示那个面板 (3)设计糗事列表先设计一条内容然后可以复制这条内容的布局在这个基础上进行修改 (4)设计视频列表需要使用video视频组件每个视频组件都有唯一的id;设计幻灯片轮播效果准备好幻灯片需要轮播的图片 (5)分享功能需要在在 Page 中定义 onShareAppMessage 函数设置该页面的分享信息 (6)在界面布局的时候会用微信小程序的组件包括view视图容器组件、image图片组件、swiper滑块视图容器组件、scroll-view可滚动视图区域组件、video视频组件等组件的使用 (7) 界面样式设计需要写一些wxss样式进行界面的美化和渲染 (8)页签菜单切换的时候需要获得该页签所对应的id需要绑定菜单切换事件 (9)页面分享需要使用onShareAppMessage这个API接口进行界面分享 (10)动态获取糗事列表信息需要使用wx.request请求获得糗事列表信息
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值