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

pageScrollTo 只是 页面的API 他对 scroll-view 的滚动是无法控制的

但是 scroll-view 也提供了一个scroll-into-view属性

我们编写一个小案例

wxml 参考代码如下

html 复制代码
<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 参考代码如下

javascript 复制代码
/* 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 参考代码如下

javascript 复制代码
Page({
  data: {
    scrollIntoView: ""
  },
  onLoad() {
    
  },
  handleTap: function(e) {
    this.setData({
      scrollIntoView: 'pinglun'
    });
  }
 
})

关键在于scroll-into-view 指定滚动id位置

然后 我们可以运行代码 你会发现 点击后 他会滚动到指定位置

而且 触发后 也不会影响继续滚动 继续滚动后再次点击 依旧会滚动到指定位置 还是非常好用的

相关推荐
Goona_5 小时前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
笨笨狗吞噬者6 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
性能优化·微信小程序·uni-app
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
全栈小58 小时前
【小程序】微信开发者工具上调用api接口可以,到了线上调用发现提示wx.request调用报错,原来是https协议问题
网络协议·小程序·https
爱隐身的官人10 小时前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
G佳伟11 小时前
你好,因用户投诉并经平台审核,发现账号已发布的服务所选类目与小程序运营内容不符合,亲测有效
小程序
计算机徐师兄11 小时前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐12 小时前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序
说私域15 小时前
开源AI智能名片赋能下微商商业模式的创新路径研究——以链动2+1模式与S2B2C商城小程序融合为例
人工智能·小程序·开源
_AaronWong16 小时前
微信小程序同声传译插件接入实战:语音识别功能完整实现指南
前端·微信小程序·uni-app