微信小程序 -- 锚点跳转（scroll-view）

最新推荐文章于 2023-07-09 13:41:00 发布

大可不必_妄

最新推荐文章于 2023-07-09 13:41:00 发布

阅读量360

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/J_012345/article/details/107166724

版权

微信小程序专栏收录该内容

10 篇文章 2 订阅

订阅专栏

scroll-view:

scroll-y : 允许纵向滚动

scroll-into-view : 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

scroll-with-animation : 在设置滚动条位置时使用动画过渡

wxml:

<view>
  <scroll-view scroll-y="{{true}}" scroll-into-view="{{jumpPosition}}" scroll-with-animation="{{true}}" style="height: 100%;">
    <view class="container" id="id99">
      <view bindtap="jumpNum" data-id="id6">点击跳转666</view>
      <view>000</view>
      <view>111</view>
      <view>222</view>
      <view>333</view>
      <view>444</view>
      <view>555</view>
      <view id="id6">666</view>
      <view>777</view>
      <view>888</view>
      <view>999</view>
      <button bindtap="jumpTop" data-value="id99">回到顶部</button>
    </view>
  </scroll-view>
</view>

wxss:

.container view{
  text-align: center;
  margin-bottom: 300rpx;
}

js:

Page({
  data: {
    jumpPosition: '',//滚动
  },
  // 跳转数字位置
  jumpNum: function(event){
    this.setData({
      jumpPosition: event.currentTarget.dataset.id
    })
  },
  // 跳转顶部
  jumpTop(event){
    this.setData({
      jumpPosition: event.currentTarget.dataset.value
    })
  }
})