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

news/2024/7/20 3:02:56 标签: 微信小程序, 小程序

我们可以先创建一个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.niftyadmin.cn/n/5031356.html

相关文章

虹科案例 | Zuellig Pharma和ELPRO通过符合GDP标准的温度监测和高效的温度数据管理为未来发展奠定基础

在本案例研究中&#xff0c;您将了解Zuellig Pharma 实施了温度监测解决方案&#xff0c;以一致的数据结构获取各国和各种运输方式的数据; 通过将温度数据上传到其数据库管理系统&#xff0c;显著提高了其效率; 并建立了为未来管理决策提供数据增值使用的基础。 项目合作伙伴 …

android studio platform使用体验分享(as无法跳转c/c++等native源码的福音,强烈推荐)

hi&#xff0c;粉丝朋友们&#xff1a; 大家好&#xff01;这些天粉丝朋友们分享了一下Android Studio for Platform 这个最新的google开发的阅读aosp源码的工具&#xff0c;特别适合做原生系统开发。具体官方介绍如下地址&#xff1a; 参考链接&#xff1a;https://developer.…

leetcode229. 多数元素 II(java)

多数元素 II 题目描述Hash表记录 题目描述 难度 - 中等 leetcode229. 多数元素 II 给定一个大小为 n 的整数数组&#xff0c;找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1a;[3] 示例 2&#xff1a; 输入&#…

C++DAY10 结构体·结构体指针

结构体指针的作用&#xff1a; 通过指针访问结构体中的成员。 *利用操作符->可以通过结构体指针访问结构体属性。 #include<iostream> using namespace std; //1、创建结构体 struct student {string name;int age;int FS; };int main() {//2、创建结构体变量struc…

java获取音频,文本准转语音时长

jar 以上传到资源中 <dependency><groupId>it.sauronsoftware</groupId><artifactId>jave</artifactId><version>1.0.2</version></dependency> mvn install:install-file -DfileD:\xxx\xxx\jave-1.0.2.jar -DgroupIdit.sauro…

【Shiro】基本使用

1、环境准备 1、Shiro不依赖容器&#xff0c;直接创建maven工程即可 2、添加依赖 <dependencies><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-core</artifactId><version>1.9.0</version></depen…

自动化控制系统的设计重点是什么?

要实现对选择性激光烧结系统预热温度的控制&#xff0c;需要找到合理的控制对象模型&#xff0c;但选择性激光烧结设备的预热温度场是一个复杂的非线性系统&#xff0c;很难找到合理的控制对象模型来实现预热温度场的温度控制。模糊控制不需要具体的控制模型&#xff0c;预热温…

怎么实现批量文本txt转音频wav

随着人工智能技术的不断发展&#xff0c;语音合成技术也得到了广泛应用。其中&#xff0c;文本转语音&#xff08;Text-to-Speech&#xff0c;TTS&#xff09;技术是语音合成技术中的重要一环。在过去的几年中&#xff0c;深度学习网络在TTS领域取得了显著的进展&#xff0c;并…