uni-app(vue3)动态获取swiper的区域高度以及通过scroll-view实现区域滚动和scroll-view的置顶功能

计算方式:

swiper高度 = page高度 - tabs高度 - search高度

具体实现:

html 复制代码
      <swiper class="swiper-box" :duration="500" @change="changeSwiper" 
              :current="currentSwiperIndex" :style="'height:' + swiperHeight + 'px'">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y="true" :show-scrollbar="false" 
                      :style="'height:' + swiperHeight + 'px'" 
                      @scrolltolower="lower" :scroll-top="scrollTop" @scroll="scroll">
            <Recommend :openUpdateFlag="openUpdateFlag" @closeUpdateFlag="handleDataUpdate" />
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 置顶 -->
    <view class="topIcon" v-if="isShowArrowUpward" @click="goScrollTop">
      <up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
    </view>
  • swiperHeight:计算swiper动态高度
  • :scroll-top: 用于重置"scroll"高度
  • @scroll: 获取"scroll"滚动后的信息
  • @scrolltolower: 触底后自动触发,用于异步请求以加载更多数据
  • :show-scrollbar: 不显示滚动条

注意: scroll-view同样需要计算区域高度

js 复制代码
const isShowArrowUpward = ref(false); // 置顶图标
const swiperHeight = ref(0); // swiper高度
const tmpScrollHeight = ref(0); // 记录scroll临时高度
const scrollTop = ref(0); // 重置scroll高度

计算swiper的高度

js 复制代码
// 计算swiper的高度
onMounted(() => {
  let headerSearchHeight,
    headerTabsHeight = 0;
  // 头部搜索height: header-container
  let headerSearchView = uni.createSelectorQuery().select('.header-container');
  headerSearchView
    .boundingClientRect((data) => {
      headerSearchHeight = data.height;
    })
    .exec();
  // 顶部tabs-height:
  let headerTabsView = uni.createSelectorQuery().select('.u-tabs');
  headerTabsView
    .boundingClientRect((data) => {
      headerTabsHeight = data.height;
    })
    .exec();
  // swiper-height
  uni.getSystemInfo({
    success: (res) => {
      swiperHeight.value = res.windowHeight - headerSearchHeight - headerTabsHeight;
    }
  });
});

注意: 需要在dom渲染完成后(onMounted、onReady)才能获取到高度值

js 复制代码
/**
 * scroll-view 是区域滚动,所以无法去监听屏幕滚动
 */
const scroll = (e) => {
  // 记录"scroll-view"临时滚动的高度
  tmpScrollHeight.value = e.detail.scrollTop;
  if (e.detail.scrollTop > 400) {
    // 显示"置顶"图标 
    isShowArrowUpward.value = true;
  } else {
    isShowArrowUpward.value = false;
  }
};

scroll-view置顶(方案一: 无动画)

js 复制代码
// scroll-view高度置顶
const goScrollTop = () => {
  // 解决view层不同步的问题
  scrollTop.value = tmpScrollHeight.value;
  // 强制刷新
  nextTick(() => {
    scrollTop.value = 0;
  });
};

scroll-view置顶(方案二: 添加过渡动画)

JavaScript 模拟平滑滚动(适用于所有平台,包括微信小程序)‌

js 复制代码
const scrollDuration = 300; // 动画时长(ms)

const goScrollTop = () => {
  // 解决view层不同步的问题
  scrollTop.value = tmpScrollHeight.value;
  const startTime = Date.now();
  const startTop = scrollTop.value;
  const distance = startTop; // 需要滚动的距离

  const scrollStep = () => {
    const currentTime = Date.now();
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / scrollDuration, 1); // 0~1

    // 使用缓动函数(如 easeOutQuad)
    const easeProgress = 1 - Math.pow(1 - progress, 2);
    scrollTop.value = startTop - distance * easeProgress;

    if (timeElapsed < scrollDuration) {
      requestAnimationFrame(scrollStep);
    } else {
      // 强制刷新
      nextTick(() => {
        scrollTop.value = 0; // 确保最终位置准确
      });
    }
  };
  requestAnimationFrame(scrollStep);
};
css 复制代码
.topIcon {
  position: fixed;
  bottom: 120rpx;
  right: 30rpx;
  width: 44rpx;
  height: 44rpx;
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
相关推荐
Q_Q51100828532 分钟前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆1 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
盛夏绽放6 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
知识分享小能手6 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008898 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
风清云淡_A10 小时前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin10 小时前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske10 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
Q_Q51100828520 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916007471 天前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview