微信小程序滚动区域

最新推荐文章于 2024-07-06 22:23:57 发布

易伟律师

最新推荐文章于 2024-07-06 22:23:57 发布

阅读量1.3k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/u011330225/article/details/76163902

版权

小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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
       })
     }
   })
 }
})