一、需求：

uniapp實(shí)現(xiàn)點(diǎn)擊A頁(yè)面按鈕，跳轉(zhuǎn)到B頁(yè)面的指定位置

二、實(shí)現(xiàn)方法

第一種方式：

必須必須要注意！

scroll-into-view 即使是測(cè)試也不可寫死（組件布局完成后，動(dòng)態(tài)的改變這個(gè)scroll-into-view的值，才會(huì)跳到索引位置）

scroll-y=“true”& 固定高度

A頁(yè)面

<button bindtap='clickBtn'>跳轉(zhuǎn)</button>

clickBtn: function(){
    uni.navigateTo({
        url: '../b/b?viewId=view4' // 參數(shù)viewId=定位的位置id
    })
}

B.頁(yè)面

<scroll-view  scroll-into-view="{{toView}}" style='height:100%;' scroll-y="true" class="scr">
    <view id='view1' style='200px;'>
        <text>My is View1</text>
    </view>
 
    <view id='view2' style='200px;'>
        <text>My is View2</text>
    </view>
 
    <view id='view3' style='200px;'>
        <text>My is View3</text>
    </view>
 
    <view id='view4' style='200px;'>
        <text>My is View4</text>
    </view>
 
    <view id='view5' style='200px;'>
        <text>My is View5</text>
    </view>
</scroll-view>


Page({
  data: {
      toView:'' // 配置默認(rèn)顯示view
  },
  onLoad: function (options) {
    var id = options.viewId // 定位view的id
    this.setData({
        toView:'id'
    })
  }
})

第二種方式：

在A頁(yè)面的按鈕點(diǎn)擊事件中，通過(guò)uni.navigateTo方法跳轉(zhuǎn)到B頁(yè)面，并通過(guò)URL參數(shù)傳遞分類信息。

// A頁(yè)面按鈕點(diǎn)擊事件

navigateToBPage(category) {
  uni.navigateTo({
    url: '/pages/BPage/BPage?category=' + category
  });
}

在B頁(yè)面的onLoad生命周期中，通過(guò)this.$route.query獲取URL參數(shù)，并根據(jù)參數(shù)值進(jìn)行分類顯示

// B頁(yè)面的onLoad生命周期

onLoad() {
  // 獲取URL參數(shù)中的category值
  const category = this.$route.query.category;

  // 根據(jù)category值進(jìn)行分類顯示
  if (category === 'category1') {
    // 根據(jù)分類1顯示內(nèi)容
    this.showCategory1Content();
  } else if (category === 'category2') {
    // 根據(jù)分類2顯示內(nèi)容
    this.showCategory2Content();
  } else {
    // 默認(rèn)處理...
    this.handleDefault();
  }
},
methods: {
  showCategory1Content() {
    // 根據(jù)分類1顯示內(nèi)容的邏輯
  },
  showCategory2Content() {
    // 根據(jù)分類2顯示內(nèi)容的邏輯
  },
  handleDefault() {
    // 默認(rèn)處理的邏輯
  }
}

第三種方式：

可以使用uni.navigateTo方法跳轉(zhuǎn)到B頁(yè)面，并在B頁(yè)面的onReady生命周期中使用uni.pageScrollTo方法滾動(dòng)到指定的view位置

在A頁(yè)面的按鈕點(diǎn)擊事件中：

// A頁(yè)面按鈕點(diǎn)擊事件
navigateToBPage() {
  uni.navigateTo({
    url: '/pages/BPage/BPage'
  });
}

在B頁(yè)面的onReady生命周期中：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-808083.html

// B頁(yè)面的onReady生命周期
onReady() {
  // 使用setTimeout延遲執(zhí)行，確保DOM渲染完成
  setTimeout(() => {
    // 獲取目標(biāo)view的選擇器
    const selector = '#targetView';

    // 使用uni.pageScrollTo方法滾動(dòng)到目標(biāo)view位置
    uni.pageScrollTo({
      selector,
      duration: 300
    });
  }, 2000);
}

到了這里，關(guān)于uniapp實(shí)現(xiàn)點(diǎn)擊A頁(yè)面按鈕，跳轉(zhuǎn)到B頁(yè)面的指定位置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！