uniapp 微信小程序 Vue H5 跳转页面定位滑动到指定位置

最新推荐文章于 2024-07-30 14:06:45 发布

RosaChampagne

最新推荐文章于 2024-07-30 14:06:45 发布

阅读量1.6k

点赞数 2

分类专栏：前端微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/RosaChampagne/article/details/107973344

版权

前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

微信小程序

16 篇文章 0 订阅

订阅专栏

微信小程序

需要看到滑动效果：

微信小程序滚动

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

<scroll-view v-if="showPage" scroll-y :scroll-into-view="scrollViewId" class="member-container">
......
  <div id="freight-coupon-box">
  </div>
  <div id="member-goods-list-box">
  </div>
</scroll-view>

onLoad (option) {
 if (option.toGoodsList) {
    this.toGoodsList = option.toGoodsList
  }
  if (option.toFreight) {
    this.toFreight = option.toFreight
  }
},
async onShow () {
   if (this.toGoodsList) {
     this.scrollViewId = 'member-goods-list-box'
   }
   if (this.toFreight) {
     this.scrollViewId = 'freight-coupon-box'
   }
},

在页面中需要点击滑动，使用uni.pageScrollTo

const query = uni.createSelectorQuery().in(this)
query.select('#goods_tab').boundingClientRect(data =>{
  this.goodsTabsTop = data.top
}).exec()
let top = this.goodsTabsTop + 70
uni.pageScrollTo({
  scrollTop: top,
  duration: 300
})

不需要看到滑动效果，直接定位：

在页面渲染之前提示加载中，不显示页面，等页面渲染之后，滚动完成再显示页面

async onShow () {
  if (this.toGoodsList) {
    this.scrollViewId = 'member-goods-list-box'
  }
  if (this.toFreight) {
    this.scrollViewId = 'freight-coupon-box'
  }
  this.showPage = true
},

H5

不需要看到滑动效果，直接定位：

H5滚动

<div v-if="showPage" class="member-container" ref="memberContainer">
......
  <div id="freight-coupon-box">
  </div>
  <div id="member-goods-list-box">
  </div>
</div>

.member-container {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: scroll;
}

async init () {
  await this.getUserInfo()
   await this.loadGoodsList()
   this.showPage = true
   this.refreshing = false

   if (this.toGoodsList) {
     this.$nextTick(() => {
       // 定位到prime专享折扣区域
       document.querySelector("#member-goods-list-box").scrollIntoView(true)
       this.$refs.memberContainer.scrollTop -= 15
       this.toGoodsList = false
     })
   }

   if (this.toFreight) {
     this.$nextTick(() => {
       // 定位到每月包邮区域
       document.querySelector("#freight-coupon-box").scrollIntoView(true)
       this.$refs.memberContainer.scrollTop -= 6
       this.toFreight = false
     })
   }
 },