微信小程序 通过 pageScrollTo 滚动到界面指定位置

我们可以先创建一个page 注意 一定要在page中使用 因为pageScrollTo控制的是页面滚动 你在组件里用 他就失效了

我们先来看一个案例
wxml 代码如下

<view><button bindtap="handleTap">回到指定位置</button><view class = "ControlHeight"></view><view id = "pinglun">指定位置</view><view class = "supportingBoundary"></view><button bindtap="handleTap">回到指定位置</button>
</view>

wxss 代码如下

/* component/indexText.wxss */
.ControlHeight{width: 100vh;background-color: aqua;height: 100vh;
}
#pinglun{width: 100vw;text-align: center;color:black;font-size: 24rpx;height: 30rpx;line-height: 30rpx;
}
.supportingBoundary{width: 100vh;background-color:brown;height: 100vh;
}

js 参考代码如下


Page({data: {},onLoad() {},handleTap: function(e) {wx.pageScrollTo({selector: '#pinglun',});}})

关键就在于 我们在页面上写了一个 id为pinglun的元素
然后 调用pageScrollTo 指定选择id为pinglun的元素 当然 id的名字大家可以随便取
这样 你就会发现 无论在页面任何位置 点击 触发handleTap
界面都会里面滚动到pinglun所在的位置
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77472.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js 小数相乘后,精度缺失问题,记录四舍五入,向下取整

在做项目的时候&#xff0c;有一个计算金额的&#xff0c;结果发现计算的金额总是缺失0.01&#xff0c;发现相乘的时候&#xff0c;会失去精度&#xff0c;如图所示。被这整的吐血&#xff0c;由于计算逻辑由前端计算&#xff0c;所以传值后端总出错(尽量后端计算)。 还发现to…

9月12日作业

作业代码 #include <iostream>using namespace std;class Shape { protected:double cir;double area; public://无参构造Shape() {cout<<"无参构造"<<endl;}//有参构造Shape(double c, double a):cir(c), area(a){cout<<"有参构造&quo…

IDEFICS 简介: 最先进视觉语言模型的开源复现

我们很高兴发布 IDEFICS ( Image-aware Decoder Enhanced la Flamingo with Ininterleaved Cross-attention S ) 这一开放视觉语言模型。IDEFICS 基于 Flamingo&#xff0c;Flamingo 作为最先进的视觉语言模型&#xff0c;最初由 DeepMind 开发&#xff0c;但目前尚未公开发布…

极简B站直播录制工具 录播姬 2.9.0,支持自动批量录制、弹幕录制等

录播姬 是一个简单好用免费开源的直播录制工具&#xff0c;支持自动批量录制、弹幕录制、实时监控直播间状态&#xff0c;直接获取直播流&#xff0c;非录制屏幕&#xff0c;没有二次压制 软件特点 使用简单&#xff1a;粘贴房间号或房间链接即可开录 自动录制&#xff1a;主…

LeetCode 28. 找出字符串中第一个匹配项的下标

文章目录 一、题目二、C# 题解 一、题目 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 点击此处跳转…

解构赋值及其原理

解构赋值&#xff08;Destructuring Assignment&#xff09;是一种在编程语言中将复杂数据结构&#xff08;如数组和对象&#xff09;拆解成更小的部分并分配给变量的技术。它在许多编程语言中都有支持&#xff0c;包括 JavaScript。 JavaScript 中的解构赋值允许您从数组或对…

Java 内存模型(JMM)

1.概述 JMM&#xff0c;全称 Java Memory Model&#xff0c;中文释义Java内存模型 对于 Java 程序员来说&#xff0c;在虚拟机自动内存管理机制下&#xff0c;不再需要像C/C程序开发程序员那样为每一个 new 操作去写对应的 delete/free操作&#xff0c;不容易出现内存泄漏和内…

rabbitmq队列卡住的一种情况(webservice接口超时)

一、前言 测试环境发现有一个操作一直没有进行&#xff0c;排查后发现是rabbitmq队列卡住了。 接收的后端代码已经加了完备的try-catch了&#xff0c;但是队列仍然卡住了&#xff0c;并且日志没有报错&#xff0c;就很奇怪。 二、排查过程 1.找到RabbitListener&#xff0c…

根据保存的IQ信号解析出频谱视图

根据保存的IQ信号&#xff0c;可以通过一系列数字信号处理技术解析出频谱视图。下面是一种常见的方法&#xff1a; IQ信号预处理&#xff1a;首先&#xff0c;对保存的IQ信号进行预处理&#xff0c;例如进行低通滤波以消除高频噪声。 采样率转换&#xff1a;根据需要得到的频谱…

LeetCode 2596. 检查骑士巡视方案【数组,模拟】1448

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

LeetCode 53. 最大子数组和

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 使用动态规划的方法进行解决&#xff0c;我们创建一个dp表&#xff0c;用来记录以该下标为结尾的最大子数组。然后每次存dp表的时候&#xff0c;进行取最大值。最终返回最大值。 由…

二叉排序树(BST)的算法分析以及基本操作(结点的查询,插入,删除)

1.二叉排序树的定义 二叉排序树&#xff0c;又称二叉查找树&#xff08;BST&#xff0c;Binary Search Tree) 默认不允许两个结点的关键字相同。 1.二叉排序树的性质: 任意一棵二叉排序树的子树的结点大小都满足“左小右大”。 左子树上所有结点的关键字均小于根结点的关键…

基于Python和mysql开发的智慧校园答题考试系统(源码+数据库+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python和mysql开发的智慧校园答题考试系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都…

二分算法(超详细)

快速排序 题目1-整数二分-数的范围 给定一个按照升序排列的长度为 n 的整数数组&#xff0c;以及 q 个查询。 对于每个查询&#xff0c;返回一个元素 k 的起始位置和终止位置&#xff08;位置从 0 开始计数&#xff09;。 如果数组中不存在该元素&#xff0c;则返回 -1 -1。…

【动手学深度学习】--长短期记忆网络LSTM

文章目录 长短期记忆网络LSTM1.门控记忆元1.1输入门、忘记门、输出门1.2候选记忆元1.3记忆元1.4隐状态 2.从零实现2.1加载数据集2.2初始化模型参数2.3定义模型2.4 训练与预测 3.简洁实现 长短期记忆网络LSTM 学习视频&#xff1a;长短期记忆网络&#xff08;LSTM&#xff09;【…

redis 常用数据结构2

目录 list LPUSH LRANGE LPUSHX RPUSH RPUSHX LPOP RPOP LINDEX LINSERT LLEN LREM LTRIM LSET BLPOP / BRPOP 编码方式 set SADD SMEMBERS SISMEMBER SPOP SCARD SRANDMEMBER SMOVE SREM SINTER SINTERSTORE SUNION SUNIONSTORE SDIFF SDIFFSTO…

leetcode面试题:交换和(三种方法实现)

交换和&#xff1a; 给定两个整数数组&#xff0c;请交换一对数值&#xff08;每个数组中取一个数值&#xff09;&#xff0c;使得两个数组所有元素的和相等。 返回一个数组&#xff0c;第一个元素是第一个数组中要交换的元素&#xff0c;第二个元素是第二个数组中要交换的元…

白鲸开源 X SelectDB 金融大数据联合解决方案公布!从源头解决大数据开发挑战

业务挑战与痛点 随着互联网技术的发展、云计算技术的成熟、人工智能技术的兴起和数字化经济的崛起&#xff0c;数据已成为企业的核心资产。在金融行业中&#xff0c;数字化已成为了支撑各类业务场景的核心力量&#xff0c;包括个人理财、企业融资、股票交易、保险理赔、贷款服…

如何构建一个简单的前端框架

先让我来解释一下什么是前端框架。所谓的前端框架&#xff0c;就是一种能够让我们避免去写常规的HTML和JavaScript代码 <p id"cool-para"></p> <script>const coolPara Test;const el document.getElementById(cool-para);el.innerText coolPa…

TensorFlow 02(张量)

一、张量 张量Tensor 张量是一个多维数组。与NumPy ndarray对象类似&#xff0c;tf.Tensor对象也具有数据类型和形状。如下图所示: 此外&#xff0c;tf.Tensors可以保留在GPU中。TensorFlow提供了丰富的操作库 (tf.add&#xff0c;tf.matmul,tf.linalg.inv等)&#xff0c;它们…