微信小程序实现滚动到指定位置

摘要:
在小程序中实现一般需要借助srcoll-view组件,而srcoll-view在实现效果时,需要指定固定的高,这就让我很头疼了,因为我不知道最终要显示的有多高,动态计算也比较麻烦。有没有其它的办法实现这种滚动效果呢?
  <view   bindtap="toComment">查看回答</view>
  //...其他内容
  <view   id="comment">回答</view>
toComment() {
  var query =  wx.createSelectorQuery()//创建节点查询器
  query.select('#comment').boundingClientRect()//选择id为comment的节点并查询的它布局位置
  query.exec(function(res) {//执行请求
      wx.pageScrollTo({
        scrollTop: res[0].top,//滚动到页面节点的上边界坐标
        duration: 300   // 滚动动画的时长
      });
    })
  },

微信小程序实现滚动到指定位置第1张

在HTML中实现很简单。在小程序中实现一般需要借助srcoll-view组件,而srcoll-view在实现效果时,需要指定固定的高,这就让我很头疼了,因为我不知道最终要显示的有多高,动态计算也比较麻烦。有没有其它的办法实现这种滚动效果呢?当然是有的,最终实现了。代码如下:

微信小程序实现滚动到指定位置第2张

免责声明:文章转载自《微信小程序实现滚动到指定位置》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇标准Socket与Delphi中的Socketlinux系统编程:自己动手写一个who命令下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

小程序更新发布之后线上还是之前的老版本

微信小程序每次发布更新后线上还是之前的老版本,要删除后重新打开才会显示新版本,特烦。 不知道是不是太久没去看文档了,发现 api 中增加了更新wx.getUpdateManager(),于是立马来试试。 在 app.js 中增加一个 onLaunch 生命周期函数,然后把微信的这段示例代码丢进去,在编译模式中勾选“下次编译时模拟更新”,编译时就可以看到效果...

微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行

相信大家在做小程序的时候启动页跳转到tab首页会用到switchTab 但是在跳转后发现页面模块不全,后面console.log()后发现是onLoad里面的方法不执行 解决这种问题的方法页有很多中,最简单的就是在启动页添加跳转成功的方法 wx.switchTab({ url: '/pages/index/index', succe...

微信小程序添加、删除class’

终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题。 今天第一天开发就遇到问题了。 项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作dom啊; 折腾一个多小时最终找到两种方法,分享给大家; 第一种比较直接但是,不适合多个操作; 1,第一种感觉比较傻      <view class=...

微信小程序锚点跳转(仿京东小程序tab效果)

1、锚点按钮 data-* 的值对应要跳转的锚点的id值 2、点击按钮时,将toView的值设置为当前点击的按钮的data-*的值(一定要用setData方法,不能直接用this.toView=... ,不然页面的值无法改变) 3、给需要跳转的内容外加上<scroll-view ></scroll-view> scroll-i...

微信小程序官方示例 官方weui-wxss下载于安装 详解

1.小程序示例源码:https://github.com/wechat-miniprogram/miniprogram-demo 2.微信 weui下载地址:https://github.com/weui/weui-wxss/ weui用微信开发者工具打开步骤。 新先小程序,目录选择dist。appid可以选择测试 对WEUI css详解...

微信小程序实现node的自动打包上传代码

在平时的小程序开发过程中,可能会遇到下面这些小问题,虽然不影响开发过程,但是开发体验确会差一点,具体如下: 每次在编辑器中运行构建命令,第一次还需要手动打开微信开发者工具,打开指定项目 每次准备发布体验版时,需要先在本地打包,等待打包完成,在开发者工具中点击上传代码 那么怎么避免重复的操作,特别是比较频繁的发布场景,可能每天需要多次的等待及上传操作...