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

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

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

相关推荐
老李不敲代码17 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa17 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J19 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896320 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa2 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序
换日线°3 天前
微信小程序拖拽排序有效果图
微信小程序