微信小程序 scroll-view 实现锚点，点击跳到指定页面（位置）

最新推荐文章于 2024-07-22 11:20:48 发布

迷途知返的熊猫

最新推荐文章于 2024-07-22 11:20:48 发布

阅读量5k

点赞数 4

文章标签：小程序 js

本文链接：https://blog.csdn.net/qq_37172200/article/details/105026843

版权

微信小程序点击 tab 导航栏，滑动到对应的栏目内容位置，这也是常用的功能。
效果图：
在这里插入图片描述
用到的标签是.
用户点击导航标签，触发函数，bindtap=‘jumpTo’，去setdata .标签的 scroll-into-view="{{toViewid}}" ，从而实现滑动跳转。
代码如下：

wxml:

<view class="list">
    <view class="a" bindtap='jumpTo' data-myid="list0">list0</view>
    <view class="a" bindtap='jumpTo' data-myid="list1">list1</view>
    <view class="a" bindtap='jumpTo' data-myid="list2">list2</view>
</view>

<scroll-view  class="ab" scroll-into-view="{{toViewid}}" scroll-y="true" scroll-with-animation="true">
    <view class="b" wx:for="{{list}}" wx:key="index" id="list{{index}}">
      {{item}}
    </view>
</scroll-view>

js:

//index.js
//获取应用实例
const app = getApp()

Page({
  

  data: {
    list: ["list0", "list1", "list2"],
    toViewid: '',
  },
  jumpTo: function (e) {
    // 获取标签元素上自定义的 data-myid 属性的值
    let myid = e.currentTarget.dataset.myid;
    console.log(myid);
    this.setData({
      toViewid: myid
    })
  }

})

wxss:

page{
  height: 100%;
}

.list{
   display: flex;
   justify-content:center;

}
.a{
  background-color: #005146;
  width: 300rpx;
  text-align: center;
}

.ab{
   height: 100%;
   background-color: #0094ff;

}
.b{

height: 100%;
padding: 0 11px;

}