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

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

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

相关推荐
Jyywww1212 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero4 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩12 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉12 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code13 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤14 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
CC同学呀21 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ6661 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十1 天前
微信点餐小程序—美食物
微信·小程序
向明天乄1 天前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序