【小程序】返回顶部wx.pageScrollTo和scroll-view的对比

一、wx.pageScrollTo（https://mp.weixin.qq.com/debug/wxadoc/dev/api/scroll.html）

1. 小程序中双击顶部的textbar。会默认回到顶部

2. 能够触发page的上拉（ReachBottom）和(PullDownRefresh)事件

3. 当页面中有使用position:fixed布局时，弹出键盘时，fixed布局部分和会闪屏

二、scroll-view（https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html）

1. 纵向滚动(scroll-y)时，必须设置height值，并且不能使用css忠的calc来计算，scroll-top才能生效

2. 小程序中双击顶部的textbar，无法回到顶部

3. 无法触发page的上拉(ReachBottom)和下拉(PullDownRefresh)事件

4. 当页面中position:fixed布局不受影响

原文地址：https://www.cnblogs.com/teemor/p/9232426.html

时间： 2024-10-12 02:33:39

【小程序】返回顶部wx.pageScrollTo和scroll-view的对比的相关文章

小程序返回顶部top滚动

wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageScroll: function (e) { //console.log(e) var that = this var scrollTop = e.scrollTop var backTopValue = scrollTop > 500 ? true : false that.setData({ bac

微信小程序自定义顶部导航demo

注释:自定义导航需要自备相应图片一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1.全局顶部导航自定义,在app.json的“window”里添加"navigationStyle": "custom" 2.只在某一个页面自定义顶部导航,在该页面的json文件里添加"navigationStyle": "custom&qu

微信应用号小程序发起请求wx.request(OBJECT)

微信应用号小程序发起请求wx.request(OBJECT) wx.request(OBJECT) ? wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 参数名类型必填说明 url String 是开发者服务器接口地址 data Object.String 否请求的参数 header Object 否设置请求的header , header中不能设置Referer method String 否默认为GET,有效值:O

微信应用号小程序WebSocket连接wx.connectSocket(OBJECT)

微信应用号小程序Socket连接wx.connectSocket(OBJECT) wx.connectSocket(OBJECT) ? 创建一个 WebSocket 连接:一个微信小程序同时只能有一个WebSocket连接,如果当前已存在一个WebSocket连接,会自动关闭该连接,并重新创建一个WebSocket连接. OBJECT参数说明: 参数类型必填说明 url String 是开发者服务器接口地址,必须是HTTPS协议,且域名必须是后台配置的合法域名 data Object 否

微信应用号小程序上传wx.uploadFile(OBJECT)

微信应用号小程序上传wx.uploadFile(OBJECT) wx.uploadFile(OBJECT) ? 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器.客户端发起一个HTTPS POST请求,其中 Content-Type 为 multipart/form-data . OBJECT参数说明: 参数类型必填说明 url String 是开发者服务器url filePath S

jquery小demo——返回顶部

此文闲来无事写了个返回顶部小demo,当文档高度大于窗口高度时,返回顶部按钮显示,否则隐藏. 具体代码见下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

微信小程序之使用wx:for遍历循环

效果图如下: 实现代码如下:type.js: // pages/type/type.js Page({ /** * 页面的初始数据 */ data: { types: "" }, editType: function (e) { var typeId = e.currentTarget.dataset['id']; console.log("edit:"+typeId); wx.navigateTo({ url: '../type_edit/type_edit?ty

微信小程序开发中wx.redirectTo与wx.navigateTo跳转页面未果

学习小程序开发中难免遇到一些小坑,作者在进行登录功能时遇到登录成功后,页面不可实现跳转到个人中心(admin/admin). 首先大致介绍一下本文的逻辑:验证用户信息后,需跳转页面到个人中心(tabBar页面),采用wx.redirectTo与wx.navigateTo两种方法均未实现,且不报错. 主要原因: admin/admin属于tabBar页面,采用上述两方法不会有任何效果,需采用wx.switchTab法进行跳转. 跳转完成页面: 页面跳转方法: 1.wx.navigateTo 保留当

微信小程序在使用wx.request时显示加载中

微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.js var requestHandler = { url: '', data: {}, method: '', success: function (res) { }, fail: function () { }, complet