微信小程序滚动区域

最新推荐文章于 2023-11-29 11:40:41 发布

易伟律师

最新推荐文章于 2023-11-29 11:40:41 发布

阅读量1.3k

点赞数 1

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/u011330225/article/details/76163902

版权

小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍了微信小程序中使用scroll-view组件实现滚动定位的方法。通过设置特定高度并利用scroll-into-view属性，可以实现在不同内容块间的平滑跳转。文章提供了具体的wxml和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml如下，滚动跳转必须设置height，stroll-top为滑块位置，不可省略。

<scroll-view scroll-y='true' scroll-with-animation enable-back-to-top style="height: {{h}}px;"  scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<button class="top" bindtap="jumpmulu" size="mini">目录</button>>
<view id="intro" class="p">《微信小程序快速开发：视频指导版》.....
<view id="mulu">
目录
</view>
第1章 微信小程序介绍
....
</view>
<view class="jump">
<button size="mini" bindtap="jumptop">顶部</button>
</view>
</scroll-view>

JS文件如下：

Page({
  data: {
    toView: '',
    scrollTop: 10
  },
  jumpmulu: function (e) {
    this.setData({
      toView: 'mulu'
    })
  },
  jumptop: function (e) {
    this.setData({
      toView: 'intro'
    })
  },
  onLoad: function (options){
   var that=this
   wx.getSystemInfo({
     success: function (res) {
       that.setData({
        h:res.windowHeight
       })
     }
   })
 }
})