API:https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html

wx.pageScrollTo

在小程序的开发过程中,有个功能是点击后需要往view层中添加数据内容,在添加后需要将内容滚动到最下面一条,以便有更好的用户体验。

页面布局是:

最外层<view class="box">内容</view>

底部有输入框固定着<view class='footer'></footer>

为了解决抖动页面的问题:如果页面中有fixed定位的元素,定位的元素会跟随页面滚动,再回到位置上,产生页面抖动 => 在代码中加入duration:0

滚动到底部代码如下

  wx.createSelectorQuery().select('.box').boundingClientRect(function (rect) {
// 使页面滚动到底部
// console.log(rect.bottom)
// console.log(rect.height)
wx.pageScrollTo({
scrollTop: rect.height,
duration: 0
})
}).exec()

参考博文 转自:https://blog.csdn.net/qq_41080490/article/details/80267742

小程序 滚动wx.pageScrollTo的更多相关文章

  1. 微信小程序滚动tab的实现

    微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...

  2. 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2

    今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...

  3. 微信小程序遍历wx:for,wx:for-item,wx:key

    微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...

  4. 小程序调用wx.chooseLocation接口的时候无法获取权限(ios)

    ios手机小程序调用wx.chooseLocation接口的时候,获取权限的时候报authorize:fail:require permission desc这样子的错误,这是由于苹果的安全机制导致需 ...

  5. 微信小程序-滚动消息通知

    写在前面: 微信小程序学的不太多,做了一个简单的项目,回来很快时间内把在深圳两天的房租给赚回来了. 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组 ...

  6. 微信小程序-滚动消息通知效果

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...

  7. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  8. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  9. 微信小程序滚动Tab选项卡:左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

随机推荐

  1. webstorm主要快捷键

    1.  必备快捷键 Ctrl+/:注释当前行    F11:全屏    Alt+数字:切换打开第N个文件    Ctrl+Shift+P:打开命令面板    Ctrl+P:搜索项目中的文件    Ct ...

  2. Java基础之中间件的初识

    java常用的中间件 一般本地开发的话建议使用tomcat.(小项目,或者是个人开发) linux系统建议使用jetty或apache hpptd 大型的项目或者商业项目就用JBOSS或webloig ...

  3. C++\CLI语法 在项目中的使用

    通常情况下,对一个标准的com组件进行集成,网上普遍使用的方式有: 1.#import *.dll 或 #import *.ocx的方式,VS编译器重新编译后,就会自动生成组件对应的*.tlh文件,该 ...

  4. 论文阅读笔记四十三:DeeperLab: Single-Shot Image Parser(CVPR2019)

    论文原址:https://arxiv.org/abs/1902.05093 github:https://github.com/lingtengqiu/Deeperlab-pytorch 摘要 本文提 ...

  5. 使用java的Calendar工具类获取到本月的第一天起始时间和最后一天结束时间。

    1.使用java的Calendar工具类获取到本月的第一天起始时间和最后一天结束时间. package com.fline.aic.utils; import java.text.DateFormat ...

  6. Git一些简单但非常重要并常用的操作命令

    1.将本地与github进行关联配置 生成公钥 ssh-keygen -t rsa -C "jiasheng.mei@hpe.com" 将公钥拷贝到github中 在公钥同文件夹( ...

  7. Nginx 和 IIS 实现动静分离(转)

    转载地址:https://www.cnblogs.com/paul8339/p/5825201.html 动静分离,说白了,就是将网站静态资源(HTML,JavaScript,CSS,img等文件)与 ...

  8. 你好!酷痞 Coolpy

    欢迎你进入酷痞的物联网世界.这里有着自由的空气和自然的气息.接下来我将告诉你如果一步步建立一个自己专属的物联网平台. 由于目前的酷痞的官方域名还没有通过备案所以现在用临时域名解说本说明. 最终酷痞的官 ...

  9. Boredom

    Alex doesn't like boredom. That's why whenever he gets bored, he comes up with games. One long winte ...

  10. [转]Web应用防火墙WAF详解

    通过nginx配置文件抵御攻击 0x00 前言 大家好,我们是OpenCDN团队的Twwy.这次我们来讲讲如何通过简单的配置文件来实现nginx防御攻击的效果. 其实很多时候,各种防攻击的思路我们都明 ...