微信小程序 解决 当套在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位置

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

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

相关推荐
難釋懷12 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c12 小时前
微信小程序核心知识点速览
微信小程序·小程序
2501_915918411 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷1 天前
第一个小程序
小程序
春哥的研究所1 天前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld1 天前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点1 天前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖1 天前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发1 天前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb