【微信小程序】小程序之滚动页面的某个元素位置

2023-11-15

这种效果基本上都是在文章详情页面才会出现,用于点击按钮页面滚动到文章的评论位置。但是不排除可以用于别的功能!

首先我们需要用到的是在小程序里面获取某一个元素的位置高度

        var that = this;
        var flag = that.data.flag;    //flag是一个开关变量,用来控制点击滑动到指定位置,再次点击返回到原位置
      console.log('点击过后的开关:',flag);
      var query = wx.createSelectorQuery(); //获取某个元素返回的是一个对象
      //选择id
      if(flag){
        query.select('滚动元素的类名').boundingClientRect(function (rect) {
          console.log('需要滚动的高度:', rect.height);
          var _heightd = rect.height;
          wx.pageScrollTo({
            scrollTop: _heightd,   //页面滚动的距离
            duration: 1000,    //页面滚动速度 单位ms
            success:function(e){    //成功函数
              that.setData({
                flag: false
              })
            }
          });
        }).exec();
        console.log(flag)
      }else{
        console.log(flag)
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 1000,
          success: function (e) {
            that.setData({
              flag: true
            })
          }
        });
      }

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【微信小程序】小程序之滚动页面的某个元素位置 的相关文章

  • SSD,PCI-E,NVMe,M.2分类详解

    SSD PCI E NVMe M 2分类详解 首先说一下目前固态硬盘常用的两个接口 与主板相连的接口形状 SATA3和M 2 1 采用SATA3接口 目前机械硬盘采用的接口方式 的固态硬盘 在传输方式上与SATA3 的机械硬盘一样 速度的提
  • 如何使用Pandas的ExcelWriter进行excel操作

    pandas ExcelWriter定制格式 定制表头 渲染颜色等 非ExcelWriter标准的创建模式 ExcelWriter这个插件有个坑 就是已经设置好的格式是无法更改的 因此 由pandas转成excel的时候 必须将格式清除 尤
  • scanf语句的使用和执行原理

    scanf语句的使用和执行原理 1 如何使用scanf 2 scanf语句的原理 1 如何使用scanf d说明我们现在要读入一个整数了 scanf这个函数会读入一个整数 读到的结果赋值给指定变量 要注意指定变量前面的 scanf d pr
  • VUE中使用高德地图(原生UI,信息窗体内部事件监听)

    VUE中使用高德地图 原生UI 先吐槽一下 本人的环境是基于vue3 0的项目 上一位参与项目的同事使用的事vue amap 因工作需要 另外一位同事去了别的项目 所以这个万恶的项目由本人自己维护 就是再本周新增了需求 根据不用大区的用户进
  • ruoyi若依mybatis升级为mybatis-plus

    一 添加mybatis plus依赖 删除mybatis依赖 根目录下的pom文件 更改前

随机推荐

  • 高可用性H.A.(High Availability)

    高可用性 H A High Availability 指的是通过尽量缩短因日常维护操作 计划 和突发的系统崩溃 非计划 所导致的停机时间 以提高系统和应用的可用性
  • html / css 基础面试题 --- 页面导入时,使用link与@import有什么区别?

    页面导入时 使用link与 import有什么区别 标签和 import指令都可以用于在HTML文档中导入CSS样式表 尽管它们都可以实现相同的目的 但它们之间还是存在一些差异 1 加载顺序 当浏览器解析到标签时 会立即下载并应用样式表 这
  • Sigmoid函数使用教程

    Sigmoid函数是一种常用的激活函数 它将输入值映射到一个范围在0到1之间的连续输出 Sigmoid函数的公式如下 scss f x 1 1 exp x 以下是使用Sigmoid函数的Python示例代码 pythonCopy code
  • 六、MATLAB入门—文件操作

    文章目录 前言 一 文件的打开与关闭 1 1 文件的打开 1 2 文件的关闭 二 文件的读写操作 2 1 二进制文件的读写操作 2 2 文本文件的读写操作 三 数据文件定位 总结 前言 经过前面一段时间的学习 相信大家已经能较为熟练的在MA
  • Mini AHRS 姿态解算说明

    本文旨在讲解以下内容 1 加速度 2 陀螺仪 3 磁力计 0 序言 一直想写篇文章关于姿态解算原理的 使用尽量通俗的语句说明如何从加速度计和陀螺仪的数据 融合得到载体的姿态角 无奈自己的水平有限 一直搁置 淡泊以明志 宁静以致远 人总是要逼
  • 计算机网络实验报告 静态路由的配置

    实验名称 静态路由的配置 一 实验目的 1 掌握路由器的配置 2 学会配置静态路由 3 实现静态路由的不同网络间的互通 二 实验内容 1 搭建拓扑图 2 网络拓扑节点IP配置 3 静态路由配置实现不同网络的通信 三 实验环境 GNS3是一款
  • 七大排序之归并排序

    文章目录 什么是归并排序 归并排序代码 归并排序相关习题 148 排序链表 剑指 Offer 51 数组中的逆序对 总结 什么是归并排序 归并排序的思想 将原数组不断拆分 一直拆到每个子数组只有一个元素时 第一阶段结束 然后开始 并 将相邻
  • Databend 开源周报第 110 期

    Databend 是一款现代云数仓 专为弹性和高效设计 为您的大规模分析需求保驾护航 自由且开源 即刻体验云服务 https app databend cn What s On In Databend 探索 Databend 本周新进展 遇
  • 踩坑日记(一)

    1 Vue 错误 Uncaught TypeError Object is not a function at eval vue router esm bundler js vue router版本太高了 需降低版本 降为 3 5 3 可参
  • VUE3 之 条件渲染

    目录 1 概述 2 条件渲染 3 综述 4 个人公众号 1 概述 老话说的好 要锻炼逆向思维 人取我弃 人弃我取 言归正传 今天我们来聊聊 VUE3 的条件渲染 2 条件渲染 2 1 v if div div
  • 全手工杂拌面——韩国才有的中华料理 冬至餐桌上的25道家常手工主食

    这是一道韩国特有的中餐 全手工海鲜杂拌面 面条以鸡蛋 面粉和成 不加一滴水 汤则由鸡骨头经过数小时熬制而成的汤底制作而成 从汤到面一律手工打造 彻底抛弃了现成的面条 速食的鸡汤 符合眼下反对快餐食品 提倡有个性及营养均衡的传统美食的慢食文化
  • MySQL-高级处理

    第五章 SQL高级处理 5 1 窗口函数 5 1 1 窗口函数概念及基本的使用方法 窗口函数也称为OLAP函数 OLAP 是 OnLine AnalyticalProcessing 的简称 意思是对数据库数据进行实时分析处理 为了便于理解
  • QT--收发数据代码

    1 pro QT core gui QT serialport QT widgets QT core 2 h ifndef JTLTESTTOOL H define JTLTESTTOOL H include
  • 【半监督学习】2、Soft Teacher

    文章目录 一 背景 二 方法 2 1 End to End Pseudo Labeling Framework 2 2 Soft teacher 2 3 Box Jittering 三 实验 论文 End to End Semi Super
  • python3+robotframework3+selenium3分层设计和截图及注意事项

    再说一下目前的主要环境信息和版本 操作系统 win10 64位 python版本 3 9 0 RIDE版本 v2 0b2 dev1 robotframework seleniumlibrary 3 141 0 selenium 3 141
  • C语言的数据类型大全,整型数据在内存中的存储方式

    一 数据类型 通过长时间的学习C语言以及代码的编写 我掌握了很多很多的数据类型 下面就给大家罗列一下 1 内置数据类型 char 字符数据类型 所占内存空间1字节 short 短整型 所占内存空间2字节 int 整形 所占内存空间4字节
  • java 超市购物程序设计

    编写一个超市购物程序 在一家超市有以下商品 牙刷 8 8元 毛巾 10 0元 水杯 18 8元 苹果 12 5元 香蕉 15 5元 用户通过输入商品序列号进行商品购买 用户输入购买数量后计算所需花费的钱 一次购买后 按Y继续购买 N购买结束
  • shell脚本学习笔记 (sed的高级用法----模式空间和保持空间)

    前段时间在学习shell脚本 上次有提到sed的模式空间和保持空间概念 但是一直没有研究好 这两天研究了一下 所以将它发出来 不是很全面 仅仅供大家参考一下 保持空间sed在正常情况下 将处理的行读入模式空间 脚本中的 sed comman
  • ES词典热加载-通过修改ik分词器源码实现热加载自定义词典

    逻辑 自定义词典的数据从mysql加载 只需要重启一次ES即可 后续热加载 实现 在自定义词典的init方法中实现每隔一定时间读取mysql并写入自定义词典的逻辑
  • 【微信小程序】小程序之滚动页面的某个元素位置

    这种效果基本上都是在文章详情页面才会出现 用于点击按钮页面滚动到文章的评论位置 但是不排除可以用于别的功能 首先我们需要用到的是在小程序里面获取某一个元素的位置高度 var that this var flag that data flag