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

news/2024/7/20 2:13:57 标签: 微信小程序, 小程序

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.niftyadmin.cn/n/5028759.html

相关文章

2020-2023中国高等级自动驾驶产业发展趋势研究-中国高等级自动驾驶发展近况

1.2 中国高等级自动驾驶发展近况 通过对中国高等级自动驾驶行业的观察和分析&#xff0c;亿欧汽车认为&#xff0c;除技术解决方案提供商外&#xff0c;如今的车企、政府、资本同样在产业链中扮演重要角色。此外&#xff0c;车路协同技术的发展也为高等级自动驾驶的发展提供了更…

LInux - mini_shell

结合进程替换的内容&#xff0c;我们可以自己实现一个简单的shell&#xff0c;shell是命令行解释器 #include<stdio.h> #include<unistd.h> #include<sys/wait.h> #include<string.h> #include<stdlib.h> #define MAX_C 128 #define MAX_CMD 32…

Android 12 源码分析 —— 应用层 五(SystemUI的StatusBar类的启动过程和三个窗口的创建)

Android 12 源码分析 —— 应用层 五&#xff08;SystemUI的StatusBar类的启动过程和三个窗口的创建&#xff09; 在前面的文章中&#xff0c;我们介绍了SystemUI App的基本布局和基本概念。接下来&#xff0c;我们进入SystemUI应用的各个UI是如何被加入屏幕的。那么我们就先从…

【电子元件】常用电子元器件的识别之电阻器

目录 前言1. 电阻器的识别1.1 普通电阻器的识别1. 普通电阻器的识别色环电阻器绕线电阻器水泥电阻器贴片电阻器网络电阻器(排阻)保险电阻器精密电阻器2. 电阻器的符号3. 普通电阻器的主要参数标称阻值和允许误差额定功率最高工作电压温度系数1.2 电位器的识别1. 电位器的识别…

Python 类的构造方法

视频版教程 Python3零基础7天入门实战视频教程 Python类里的 __init__方法就是类的构造方法&#xff0c;用作构造对象&#xff0c;同时还可以给对象初始化属性值用。 假如类里面没有写init构造方法&#xff0c;默认会提供一个空的构造方法。 我们写上空的init构造方法&#…

浅析安防监控系统/AI视频智能分析算法:河道水文水位超标算法应用

传统的水位水尺刻度尺位监测中&#xff0c;所采用的人工读数方式&#xff0c;效率较为低下且 人工成本较高&#xff0c;不利于作业流程的数字化。尽管感应器检测会自动对水位的模拟输入进行筛选&#xff0c;但是由于成本、使用场景要求高、后续日常维护复杂等多种因素&#xff…

jitsi音视频会议集成到自己的网页中

将jitsi视频会议集成到自己的web网站&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html lang"en" xmlns:th"http://www.thymeleaf.org"> <head><meta charset"UTF-8"><meta name"viewport" content&…

服务器数据恢复-热备盘同步过程中硬盘离线的RAID5数据恢复案例

服务器数据恢复环境&#xff1a; 华为OceanStor某型号存储&#xff0c;11块硬盘组建了一组RAID5阵列&#xff0c;另外1块硬盘作为热备盘使用。基于RAID5阵列的LUN分配给linux系统使用&#xff0c;存放Oracle数据库。 服务器故障&#xff1a; RAID5阵列1块硬盘由于未知原因离线…