微信小程序 解决 当套在scroll-view中后 wx.pageScrollTo 函数失效问题解决

news2025/1/15 6:58:05

pageScrollTo 只是 页面的API 他对 scroll-view 的滚动是无法控制的
但是 scroll-view 也提供了一个scroll-into-view属性
我们编写一个小案例
wxml 参考代码如下

<view>
    <scroll-view scroll-y="{{ true }}" style="height: 100vh;" scroll-into-view="{{scrollIntoView}}">
        <button bindtap="handleTap">回到指定位置</button>
        <view class = "ControlHeight"></view>
        <view id = "pinglun">指定位置</view>
        <view class = "supportingBoundary"></view>
        <button bindtap="handleTap">回到指定位置</button>
    </scroll-view>
</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: {
    scrollIntoView: ""
  },
  onLoad() {
    
  },
  handleTap: function(e) {
    this.setData({
      scrollIntoView: 'pinglun'
    });
  }
 
})

关键在于scroll-into-view 指定滚动id位置
然后 我们可以运行代码 你会发现 点击后 他会滚动到指定位置
在这里插入图片描述
而且 触发后 也不会影响继续滚动 继续滚动后再次点击 依旧会滚动到指定位置 还是非常好用的

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

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

相关文章

笑笑云航服悦《乡村振兴战略下传统村落文化旅游设计》许少辉博士新著

笑笑云航服悦《乡村振兴战略下传统村落文化旅游设计》许少辉博士新著

Android高级开发-APK极致优化

九道工序 1. SVG(Scalable Vector Graphics)可缩放矢量图 使用矢量图代替位图可以减小 APK 的尺寸&#xff0c;因为可以针对不同屏幕密度调整同一文件的大小&#xff0c;而不会降低图像质量。 矢量图首次加载时可能消耗更多的 CPU 资源。之后&#xff0c;二者的内存使用率和…

Spring 篇

1、什么是 Spring&#xff1f; Spring是一个轻量级的IOC和AOP容器框架。是为Java应用程序提供基础性服务的一套框架&#xff0c;目的是用于简化企业应用程序的开发&#xff0c;它使得开发者只需要关心业务需求。常见的配置方式有三种&#xff1a;基于XML的配置、基于注解的配置…

06JVM_类加载器

一、类加载器 以JDK8为例&#xff1a; ①启动类加载器 ②扩展类加载器 ③应用程序类加载器 ④自定义类加载器 ①类加载器具有层级关系&#xff0c;当加载一个类的时候&#xff0c;要看所有的上级有没有加载此类。【双亲委派模式】 ②类加载器负责在运行时将Java类动态加载…

4.开放-封闭原则

这个原则其实是有两个特征&#xff0c;一个是说‘对于扩展是开放的(Open for extension)&#xff0c;另一个是说‘对于更改是封闭的(Closed for modification)[ASD]。

走近Callable

1.特点 可以有返回值可以抛出异常方法不同&#xff0c; run() / call(); Callable 接口类似于Runnable &#xff0c;因为它们都是为其实例可能有另一个线程执行的类设计的&#xff0c; 然而&#xff0c;Runnable不返回结果&#xff0c;也不能抛出被检查的异常。 2.代码测试…

互联网数字化管理升级,制造企业一站式智能管理,可定制-亿发

在互联网时代&#xff0c;传统机械制造企业面临着未有的挑战和机遇。信息化管理水平成为企业竞争力的关键因素。然而&#xff0c;许多制造企业在信息化管理中常常陷入以下三大问题&#xff1a; 1、盲目随潮流&#xff0c;缺乏总体规划 互联网时代&#xff0c;科技发展日新月异…

python基础复习-基本数据类型

目录 数字进制转换小数精度科学计算库 字符串转义符正向/反向索引正向/反向切片成员运算字符编码字符串处理 布尔类型指示条件作为掩码 类型转换 数字 进制转换 a10 bbin(a) coct(a) dhex(a) print(a,b,c,d) print(type(a)) print(type(b)) print(type(c)) print(type(d))10 …

Spring Cloud超越微服务:服务网格的崭露头角

文章目录 1. 微服务的挑战2. 什么是服务网格&#xff1f;3. Spring Cloud和服务网格服务发现负载均衡安全性服务网格扩展 4. 服务网格的优势4.1. 解耦通信逻辑4.2. 提高可观察性4.3. 灰度发布和流量控制4.4. 安全性 5. 未来展望6. 结论 &#x1f389;欢迎来到架构设计专栏~Spri…

【办公自动化】用Python在Excel中查找并替换数据(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Python 潮流周刊#20:三种基准测试的方法、为什么代码在函数中运行得更快?

△点击上方“Python猫”关注 &#xff0c;回复“1”领取电子书 你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。标题取自其中两则分享&#xff0c;不代表全部内容都是该主题&#xff0c;特此声明。 本周刊由 Python猫 出品…

【Qt】Qt中关联容器QMap,QMultiMap,QHash,QMultiHash 的理解

在Qt中&#xff0c;有几种关联容器可供选择&#xff1a; QMap&#xff1a;QMap是一个关联容器&#xff0c;存储键-值对&#xff0c;并根据键自动进行排序。它提供了快速的查找和插入操作&#xff0c;适用于需要根据键进行排序和搜索的场景。 QMultiMap&#xff1a;QMultiMap是…

软件测评中:电子政务系统怎么测评?

1、文件依据&#xff1a; 1)《中华人民共和国政府采购法实施条例》&#xff08;中华人民共和国国务院令 第658号&#xff09; 第四十一条“大型或者复杂的政府采购项目&#xff0c;应当邀请国家认可的质量检测机构参加验收工作。” 2) 《国务院办公厅关于印发国家政务信息化…

深入Android系统基础知识及基本概念

深入Android系统基础知识及基本概念 Android应用程序的基本组成部分&#xff0c;包括Activities&#xff08;活动&#xff09;、Services&#xff08;服务&#xff09;、Broadcast receivers&#xff08;广播接收器&#xff09;和Content providers&#xff08;内容提供者&…

Mysql---第八篇

系列文章目录 文章目录 系列文章目录一、mysql执行计划怎么看一、mysql执行计划怎么看 执行计划就是sql的执行查询的顺序,以及如何使用索引查询,返回的结果集的行数 EXPLAIN SELECT * from A where X=? and Y=? 1。id :是一个有顺序的编号,是查询的顺序号,有几个 sel…

ModbusTCP服务端

1在Device下&#xff0c;添加设备net&#xff1a; 公交车。 2在net下添加 ModbusTCP

技术人员如何提升商业敏感度?

在商业领域&#xff0c;最基本也是最实用的财务知识&#xff0c;就是看懂三张报表。简单地说&#xff0c;现金流量表&#xff0c;决定企业能不能活下来&#xff1b;资产负债表和利润表&#xff0c;决定企业活得好不好。下面分别来学习这三张报表。 资产负债表 资产负债表&#…

浅谈一下前端字符编码

背景 众所周知&#xff0c;计算机只能识别二进制&#xff0c;它是由逻辑电路组成&#xff0c;逻辑电路通常只有两个状态&#xff0c;开关的接通与断开&#xff0c;这两种状态正好可以用二进制数的0和1表示。但是现实中存在着其他的字符&#xff1a;数字、字母、中文、特殊符号…

如何实现Web应用、网站状态的监控?

如何实现Web应用、网站状态的监控&#xff1f; 关键词&#xff1a;网站监控,服务器监控,页面性能监控,用户体验监控本文通过代码分析、网站应用介绍网站状态监控的方式下文主要分为网站应用、技术实现两部分 一、网站应用 现在网络上已经存在一些Web网站监控的服务&#xff…

Vue ——08、路由嵌套,参数传递及重定向

路由嵌套&#xff0c;参数传递及重定向 一、路由嵌套二、参数传递第一种方式&#xff1a;第二种方式&#xff1a; 三、重定向————————创作不易&#xff0c;如觉不错&#xff0c;随手点赞&#xff0c;关注&#xff0c;收藏(*&#xffe3;︶&#xffe3;)&#xff0c;谢…