云诺说 - 小程序开发 - 软件定制
当前位置: QQ小程序 > uni-app开发之使用scroll-view实现QQ小程序自动滑动到底部(二)

uni-app开发之使用scroll-view实现QQ小程序自动滑动到底部(二)

2019-12-04 08:32 分类:QQ小程序 作者:云诺 阅读(6690)

版权声明:本文为博主原创文章,如果转载请给出原文链接:http://doofuu.com/article/4156212.html

最近在开发一款情侣星座测试类型的QQ小程序。小程序中用到了类似聊天的界面,其中需要每次发完信息自动滑动到底部的需求。小程序滑动不像HTML那么简单,可以直接定位元素位置。不慌! 在小程序中虽然不像HTML中实现自动滑动到底部那么简单,不管是QQ小程序、还是微信小程序都有两种方式可以实现自动滑动到底部(我只知道两种啊。有知道第三种的麻烦告知我一下)!

方法一:

如果你仔细查阅过文档的话,那么一定发现了uni.pageScrollTo(OBJECT) ,为什么是uni.pageScrollTo请看这篇文章, 该API可以自动滑动页面到指定的目标位置。参数说明如下:

uni.pageScrollTo({
    scrollTop: 0,    //滚动到页面的目标位置(单位px)
    duration: 300    //滚动动画的时长,默认300ms,单位 ms
});

scrollTop = 0 是滚动到最顶端,很多小程序上的回到顶部的功能就是用这个实现的。设置scrollTop不同的值可以滑动到不同的位置。


方法二:

情侣星座测试QQ小程序是使用scroll-view实现自动滑动到底部的,别问我为什么不使用第一种方式, 因为在页面中已经使用了scroll-view组件(我就是懒!)

说明如下:

<scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}">
 .... //里面就是你要滑动的内容
</scroll-view>

1、scroll-y="true" :定义页面滑动的反向

2、style="height:{{height}}px;" :初始化scroll-view的高度,一般是当前屏蔽的高度(不设置的话就只有你包含的组件的高度)

3、设置scroll-top属性实现滚动到底部,scroll-top不要带单位

每次只要设置scroll-top的值比上一次大就可以用轻松实现自动滑动到底部的需求了。具体设置多少看自己的需求(没有标准),是不是也很简单?大胆的去试吧!

看下效果吧

QQ图片20191204202227.png

效果演示小程序

7107e6ea5dd55fb64e1a7fb168c49907.png

 

祝生活愉快!

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - uni-app开发之使用scroll-view实现QQ小程序自动滑动到底部(二)

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、软件服务定制和生活记录的技术服务型学习博客网站。

微信 :LGY178888

职业 :小程序开发、软件定制

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:155 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:165 个
  • 评论总数:0 条
  • 访问总量: 732568次
  • 最近更新:2024年09月19日