小程序点击标签使屏幕滑到对应位置

功能演示
​

 

最近客户要求一个点击标签到对应位置的功能，查阅了一些他人经验。看到都是用scroll-view 做的，感觉有些麻烦，尝试使用了pageScrollTo 功能 api地址

 

采用通过id绑定的方式来进行滑动

wxml部分

<!-- 选项卡部分 -->
<view class="option">
    <view class="image" >
      <view class="image-item-1" data-id="#z1" bindtap="switch">
        <image src="/assets/cangchu.png" />
      </view>
      <view class="image-item-2">
        <image src="/assets/zhong.png" />
      </view>
      <view class="image-item-1" data-id="#c1" bindtap="switch">
        <image src="/assets/cangchu.png" />
      </view>
      <view class="image-item-2">
        <image src="/assets/zhong.png" />
      </view>
      <view class="image-item-1" data-id="#j1" bindtap="switch">
        <image src="/assets/cangchu.png" />
      </view>
      <view class="image-item-2">
        <image src="/assets/zhong.png" />
      </view>
       <view class="image-item-1" data-id="#w1" bindtap="switch">
        <image src="/assets/cangchu.png" />
      </view>
    </view>
    <view  class="option-name" >
      <view data-id="#z1" bindtap="switch">模块一</view>
      <view data-id="#c1" bindtap="switch">模块二</view>
      <view data-id="#j1" bindtap="switch">模块三</view>
      <view data-id="#w1" bindtap="switch">模块4</view>
    </view>
  </view>

 <!-- 模块一 -->
  <view class="news">
    <view class="title-2" id="z1">
      <view class="title-2-l"></view>
      <view class="title-2-r">模块一</view>
    </view>
    <view class="image">
       <image mode="scaleToFill" src="/assets/1.png" />
    </view>
  </view>
  
  <!-- 模块二 -->
  <view class="news">
    <view class="title-2" id="c1">
      <view class="title-2-l"></view>
      <view class="title-2-r">模块二</view>
    </view>
    <view class="image">
       <image mode="scaleToFill" src="/assets/1.png" />
    </view>
  </view>
  
  <!-- 模块三 -->
  <view class="news">
    <view class="title-2" id="j1">
      <view class="title-2-l"></view>
      <view class="title-2-r">模块三</view>
    </view>
    <view class="image">
       <image mode="scaleToFill" src="/assets/1.png" />
    </view>
  </view>
  
  <!-- 模块4 -->
  <view class="news">
    <view class="title-2" id="w1">
      <view class="title-2-l"></view>
      <view class="title-2-r">模块4</view>
    </view>
   <view class="image">
       <image mode="scaleToFill" src="/assets/1.png" />
    </view>
  </view>

wxss部分

/* 选项卡部分 */
.option {
  width: 100%;
  padding: 40rpx 40rpx;
  box-sizing: border-box;
}

.option .image {
  width: 100%;
  display: flex;
  align-items: center;
}

.option .image .image-item-1 {
  width: 100rpx;
  height: 100rpx;
}

.option .image .image-item-2 {
  width: 58rpx;
  height: 10rpx;
  margin: 0 16rpx;
  display: flex;
  align-items: center;
}

.option image {
  width: 100%;
  height: 100%;
}

.option .option-name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  color: rgb(51, 51, 51);
  margin-top: 22rpx;
}


/* 模块 */
.news {
  width: 100%;
  border-top: 20rpx solid #f4f5f7;
  background-color: #FFFFFF;
}

.news .title-2 {
  width: 100%;
  padding-left: 20rpx;
  box-sizing: border-box;
  margin-top: 54rpx;
  font-size: 40rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.news .title-2-l {
  width: 8rpx;
  height: 38rpx;
  background-color: #09732e;
  margin-right: 20rpx;
  border-radius: 4rpx;
}
.news .image {
  width: 100%;
  height: 474rpx;
  margin: 40rpx 0 72rpx 0;
  display: flex;
  justify-content: center;
}

.news .image image {
  height: 100%;
  width: 710rpx;
  border-radius: 6rpx;
  margin: 0 auto;
  display: block;
}

 

js 部分

const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
  
  },
   // 点击标签页面滑动到该对应标签
   switch:function(e){
    console.log(e)
    console.log(e.currentTarget.dataset.id)
    
    wx.pageScrollTo({
      duration: 300,
      selector: e.currentTarget.dataset.id,
      success:function(e){
        console.log("成功"+e)
      },
      file:function(e){
        console.log("失败"+e)
      }
    })
  },
})

 

点击查看代码片段