微信小程序，自动滑动到页面底部功能

2019独角兽企业重金招聘Python工程师标准>>>

最近在做即时聊天时，碰到了自动滑动到底部的问题，2个解决方式（其中方法1有瑕疵）：

方法一：

// 获取容器高度，使页面滚动到容器底部pageScrollToBottom: function() {wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) {if (rect){// 使页面滚动到底部console.log(rect.height);wx.pageScrollTo({scrollTop: rect.height})}}).exec()},

将js方法在页面加载完成以及发送完消息后执行，即可自动滚动到页面底部，在需要滚动的view上使id="page"；不过问题有二：

1、页面在自动上滑时会出现抖动现象，给人感觉很不舒服；

2、及时聊天在页面下方会有一个input输入框，如果该input使用confirm-hold="true"（点击右下角保持键盘不收起），那么在用该方法上滑时会将input的光标带到上面去，导致光标位置偏移。

方法二：使用scroll-view组件

wxml——

<scroll-view id="page" style='height: {{windowHeight - 60}}px' scroll-y="true" scroll-top="{{scrollTop}}">
//滚动部分代码
</scroll-view>

ps:页面中的60，是自己输入框的高度

js——

   data: {scrollTop: 0,//控制上滑距离windowHeight: 0,//页面高度}/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {var height = wx.getSystemInfoSync().windowHeight;this.setData({windowHeight: height})this.pageScrollToBottom();},// 获取容器高度，使页面滚动到容器底部pageScrollToBottom: function() {var that = this;var height = wx.getSystemInfoSync().windowHeight;wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) {if (rect){that.setData({windowHeight: height,scrollTop: rect.height})}}).exec()},

同样的，将js方法在页面加载完成以及发送完消息后执行，即可自动滚动到页面底部，自测可行；

方法二参考自：https://www.jb51.net/article/150492.htm

转载于:https://my.oschina.net/u/2480675/blog/3040220

微信小程序，自动滑动到页面底部功能相关推荐

微信小程序左右滑动切换页面（炫酷效果）以及点赞特效
#效果图 gif放不上来..我就直接口述了..需要看具体效果戳GitHub>>>>>demo地址首先左右滑动的时候整个页面会以动画效果切换(demo里是反转和水平淡出) ...
微信小程序进入某一页面自动播放背景音乐
前言:微信小程序进入某一个页面自动播放背景音乐,当退出这个页面时,音乐关闭 wxml代码: <audioloopid="greetings"src="https:/ ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
python玩微信小程序游戏_使用python实现微信小程序自动签到功能
功能描述目标完成多账号微信小程序每天自动签到输出签到成功则向微信群发送签到成功的信息否则提示用户签到失败,需手动签到包管理 requests itchat time threading 程序 ...
使用python实现微信小程序自动签到2.0
微信小程序自动签到功能描述目标输出包管理程序的结构设计步骤1 步骤2 步骤3 步骤4 代码实现使用findler抓包工具查看请求类型再次使用findler抓包,查看请求内容使用多线程 ...
微信小程序键盘弹起后页面上推问题
微信小程序键盘弹起后页面上推问题小程序的 input 组件聚焦后弹起键盘,自动通过页面上移的方式将输入框所在位置定位到键盘上方. 如果输入框本身就位于页面顶端,则不会造成上推. 但是,如果输入框是位 ...
right 微信小程序_js实现微信小程序左右滑动功能
近年来有个很火的App探探,根据这个APP的功能,本文主要介绍了微信小程序左右滑动的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 左滑右滑你不再是一个人无论你是 ...
微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...

微信小程序，自动滑动到页面底部功能

微信小程序，自动滑动到页面底部功能相关推荐

最新文章

热门文章