当前位置： 首页 > news >正文

uniapp 滚动tab

news 2025/7/3 16:03:58

uniapp + woui +unibest

<route lang="json5">{style: {navigationBarTitleText: '知识产权',navigationBarBackgroundColor: '#C80F06',navigationBarTextStyle: 'white',backgroundColorTop: '#C80F06',},}
</route>
<template><view class="bgc-b w100"><!-- 导航栏 --><NavTabScroll:tabs="tabs":current-tab="currentTab":scroll-left="scrollLeft":show-nav-bar="showNavBar"@update:currentTab="handleTabClick"/><scroll-viewclass="content-scroll"id="my-scroll":scroll-y="true":scroll-x="false":scroll-into-view="currentAnchor":scroll-top="scrollTop":scroll-with-animation="true"@scroll="handleScroll"><view class="section" id="patent"><SubTitle:title="tabs[0].title":toggleName="tabs[0].key":show="patentParam.show"ref="title1"@toggle="handleToggle('patent')"></SubTitle><viewclass="sec_item"v-for="(item, index) in patentList":key="index"v-show="patentParam.show"><Patent :data="item"></Patent></view><view class="load-more-list"><!-- v-if="+patentParam.totalCount > patentList.length" --><view class="load-more-btn" @click="handleViewMore('patent')"><text>查看更多</text></view><view class="is-loading" v-if="patentParam.loading"><text>加载中</text></view></view></view><view class="section" id="brand"><SubTitle:title="tabs[1].title":toggleName="tabs[1].key":show="brandParam.show"ref="title1"@toggle="handleToggle('brand')"></SubTitle><viewclass="sec_item"v-for="(item, index) in brandList":key="index"v-show="brandParam.show"><Brand :data="item"></Brand></view><view class="load-more-list"><!-- v-if="+brandParam.totalCount > brandList.length" --><view class="load-more-btn" @click="handleViewMore('brand')"><text>查看更多</text></view><view class="is-loading" v-if="brandParam.loading"><text>加载中</text></view></view></view><view class="section" id="softwareCopyright"><SubTitle:title="tabs[2].title":toggleName="tabs[2].key":show="showBrand"ref="title1"@toggle="handleToggle('softwareCopyright')"></SubTitle><viewclass="sec_item"v-for="(item, index) in softwareCopyrightList":key="index"v-show="softwareCopyrightParam.show"><SoftwareCopyright :data="item"></SoftwareCopyright></view><view class="load-more-list"><!-- v-if="+softwareCopyrightParam.totalCount > softwareCopyrightParam.length" --><view class="load-more-btn" @click="handleViewMore('softwareCopyright')"><text>查看更多</text></view><view class="is-loading" v-if="softwareCopyrightParam.loading"><text>加载中</text></view></view></view><view class="section" id="workCopyright"><SubTitle:title="tabs[3].title":toggleName="tabs[3].key":show="workCopyrightParam.show"ref="title1"@toggle="handleToggle('workCopyright')"></SubTitle><viewclass="sec_item"v-for="(item, index) in workCopyrightList":key="index"v-show="workCopyrightParam.show"><WorkCopyright :data="item"></WorkCopyright></view><view class="load-more-list"><!-- v-if="+workCopyrightParam.totalCount > workCopyrightList.length" --><view class="load-more-btn" @click="handleViewMore('workCopyright')"><text>查看更多</text></view><view class="is-loading" v-if="workCopyrightParam.loading"><text>加载中</text></view></view></view><view class="section" id="network"><SubTitle:title="tabs[4].title":toggleName="tabs[4].key":show="networkParam.show"ref="title1"@toggle="handleToggle('network')"></SubTitle><viewclass="sec_item"v-for="(item, index) in networkList":key="index"v-show="networkParam.show"><Network :data="item"></Network></view><view class="load-more-list"><!-- <viewclass="load-more-btn"v-if="+networkParam.totalCount > networkList.length"@click="handleViewMore('network')"><text>查看更多</text></view> --><view class="is-loading" v-if="networkParam.loading"><text>加载中</text></view></view></view></scroll-view></view>
</template><script lang="ts" setup>
import { ref, onMounted, nextTick, onUnmounted, computed } from 'vue'
import { debounce } from '@/uni_modules/wot-design-uni/components/common/util'
import {listPatentApplicationListAll,listTrademarkListAll,listSoftwareCopyrightInfoAll,listCopyrightInfoAll,listWebsiteInfoAll,
} from '@/api/enterprise'
import NavTabScroll from '@/components/NavTabScroll/NavTabScroll.vue' //滚动锚点组件
import SubTitle from '@/components/Property/title.vue'
import Patent from '@/components/Property/patent.vue'
import Brand from '@/components/Property/brand.vue'
import SoftwareCopyright from '@/components/Property/softwareCopyright.vue'
import WorkCopyright from '@/components/Property/workCopyright.vue'
import Network from '@/components/Property/network.vue'const tabs = [{ key: 'patent', title: '专利', top: 0 },{ key: 'brand', title: '商标', top: 0 },{ key: 'softwareCopyright', title: '软件著作权', top: 0 },{ key: 'workCopyright', title: '作品著作权', top: 0 },{ key: 'network', title: '网络备案', top: 0 },
]
const scrollLeft = ref(0)
const showNavBar = ref(true)
const currentTab = ref('patent')
const currentAnchor = ref('')
const scrollTop = ref(0)const id = ref(null)const topList = ref([])const patentList = ref([])
const patentParam = ref({applicationDate: '',applicationNumber: [],companyId: '960f87c242e8ad867a066cbaa5f78e1',companyName: '',name: '',pageNo: 0,pageSize: 0,publicationDate: '',totalCount: 0,totalPage: 0,loading: false,show: true,
})const brandList = ref([])
const brandParam = ref({appDate: '',companyId: '960cf87c242e8ad867a066cbaa5f78e1',companyName: '',flowStatusDesc: '',intClsDesc: '',name: '',pageNo: 1,pageSize: 5,regDate: '',totalCount: 0,totalPage: 0,loading: false,show: true,
})const softwareCopyrightList = ref([])
const softwareCopyrightParam = ref({companyId: '848f94014224e0999b52c45e02ad1164',companyName: '',name: '',pageNo: 1,pageSize: 5,registerAperDate: '',totalCount: 0,totalPage: 0,loading: false,show: true,
})
const workCopyrightList = ref([])
const workCopyrightParam = ref({companyId: 'a6faee7453d06561b7e6bb6cc3235c4f',companyName: '',pageNo: 1,pageSize: 5,registerDate: '',totalCount: 0,totalPage: 0,loading: false,show: true,
})const networkList = ref([])
const networkParam = ref({companyId: '95113c19bd54fee0155438311aac5af6',companyName: '',pageNo: 1,pageSize: 5,totalCount: 0,totalPage: 0,loading: false,show: true,
})onLoad((options) => {id.value = options.companyId// 如果有 currentTab 参数，设置初始标签并滚动if (options.currentTab) {currentTab.value = options.currentTab}// networkParam.value.companyId = id.valuePromise.all([getPatent(), getBrand(), getSoftware(), getWorkCopyright(), getNetwork()]).then((res) => {setTimeout(() => {calcPosition()currentAnchor.value = options.currentTab}, 400)},)
})
function getPatent() {return new Promise((resolve) => {const params = JSON.parse(JSON.stringify(patentParam.value))delete params.totalCountdelete params.totalPagedelete params.loadingdelete params.showpatentParam.value.loading = truelistPatentApplicationListAll(params).then((res) => {if (res.status === '0') {if (res.data && res.data.length) {patentList.value = [...patentList.value, ...res.data]}patentParam.value.totalCount = +res.totalCount || 0patentParam.value.totalPage = +res.totalPage || 0}resolve(patentList.value)}).finally(() => {patentParam.value.loading = false})})
}
function getBrand() {return new Promise((resolve) => {const params = JSON.parse(JSON.stringify(brandParam.value))delete params.totalCountdelete params.totalPagedelete params.loadingdelete params.showbrandParam.value.loading = truelistTrademarkListAll(params).then((res) => {if (res.status === '0') {if (res.data && res.data.length) {brandList.value = [...brandList.value, ...res.data]}brandParam.value.totalCount = +res.totalCount || 0brandParam.value.totalPage = +res.totalPage || 0}resolve(brandList.value)}).finally(() => {brandParam.value.loading = false})})
}
function getSoftware() {return new Promise((resolve) => {const params = JSON.parse(JSON.stringify(softwareCopyrightParam.value))delete params.totalCountdelete params.totalPagedelete params.loadingdelete params.showsoftwareCopyrightParam.value.loading = truelistSoftwareCopyrightInfoAll(params).then((res) => {if (res.status === '0') {if (res.data && res.data.length) {softwareCopyrightList.value = [...softwareCopyrightList.value, ...res.data]}softwareCopyrightParam.value.totalCount = +res.totalCount || 0softwareCopyrightParam.value.totalPage = +res.totalPage || 0}resolve(softwareCopyrightList.value)}).finally(() => {softwareCopyrightParam.value.loading = false})})
}
function getWorkCopyright() {return new Promise((resolve) => {const params = JSON.parse(JSON.stringify(workCopyrightParam.value))delete params.totalCountdelete params.totalPagedelete params.loadingdelete params.showworkCopyrightParam.value.loading = truelistCopyrightInfoAll(params).then((res) => {if (res.status === '0') {if (res.data && res.data.length) {workCopyrightList.value = [...workCopyrightList.value, ...res.data]}workCopyrightParam.value.totalCount = +res.totalCount || 0workCopyrightParam.value.totalPage = +res.totalPage || 0}resolve(workCopyrightList.value)}).finally(() => {workCopyrightParam.value.loading = false})})
}function getNetwork() {return new Promise((resolve) => {const params = JSON.parse(JSON.stringify(networkParam.value))delete params.totalCountdelete params.totalPagedelete params.loadingdelete params.shownetworkParam.value.loading = truelistWebsiteInfoAll(params).then((res) => {if (res.status === '0') {if (res.data && res.data.length) {networkList.value = [...networkList.value, ...res.data]}networkParam.value.totalCount = +res.totalCount || 0networkParam.value.totalPage = +res.totalPage || 0}resolve(networkList.value)}).finally(() => {networkParam.value.loading = false})})
}function handleToggle(type) {if (type === 'patent') {patentParam.value.show = !patentParam.value.show} else if (type === 'brand') {brandParam.value.show = !brandParam.value.show} else if (type === 'softwareCopyright') {softwareCopyrightParam.value.show = !softwareCopyrightParam.value.show} else if (type === 'workCopyright') {workCopyrightParam.value.show = !workCopyrightParam.value.show} else if (type === 'network') {networkParam.value.show = !networkParam.value.show}setTimeout(() => {calcPosition()}, 300)
}async function handleTabClick(key: string, index: number) {currentTab.value = keycurrentAnchor.value = key
}// 一进入页面且数据渲染完成后 或 展开收起的时候判断 页面元素的高度
function calcPosition() {const query = uni.createSelectorQuery()query.select('.content-scroll').boundingClientRect()tabs.forEach((key) => {query.select(`#${key.key}`).boundingClientRect()})query.exec((res) => {// 第一个参数是外层滚动框距离顶部的高度topList.value = res.map((item) => {return item.top})tabs.map((item, index) => {item.top = topList.value[index + 1] - topList.value[0]})})
}// 滚动判断高度
function handleScroll(e: any) {debouncedScrollEnd(e)
}const debouncedScrollEnd = debounce(async (e) => {const scrollTop = e.detail.scrollTop// 遍历sectionTops，找到当前所在的sectionfor (let i = 0; i < tabs.length; i++) {if (scrollTop >= tabs[i].top && scrollTop <= tabs[i + 1].top && i < tabs.length - 1) {currentTab.value = tabs[i].keybreak} else if (i === tabs.length - 1) {// 最后一个元素currentTab.value = tabs[i - 1].keybreak}}
}, 500)// 随机颜色生成
function getRandomColor(index: number): string {const colors = ['#53C89C','#4EBCDE','#2E8AF0','#588BEA','#6875E4','#9370DB','#FC9682','#F5A882','#F8BF7F','#F5D678','#63D5D2',]return colors[index % colors.length]
}function handleViewMore(type) {uni.navigateTo({url: `/pages-sub/property/${type}?companyId=${id.value}`,})
}
</script>
<style lang="scss" scoped>
.section {background: #fff;margin-bottom: 16rpx;
}
.content-scroll {height: calc(100vh - 30rpx);
}
</style>
http://www.dtcms.com/a/265219.html

相关文章：

  • autoware calar 联合运行，自动驾驶虚拟仿真器
  • ESP32S3开发：实现WiFi扫描与连接功能
  • 插值与拟合(3):B样条曲线
  • MySQL 用户管理与权限控制
  • 进阶向:Django框架深度解析各核心组件的作用与协作
  • Spring生态在Java开发
  • 自动驾驶行业向端到端架构转型
  • ArrayList剖析
  • 买卖股票的最佳时机--js 算法
  • linux LAMP 3
  • 开疆智能CCLinkIE转CANopen网关连接GBS20机器人配置案例
  • 第四章 网络传输介质与综合布线基础
  • 04-动态规划
  • OpenHarmony 5.0 解决点击导航栏切换后台按钮再切换到前台导航栏可能覆盖输入法问题，导致输入法下沉，最下面的显示不全
  • day046-tomcat与部署war包、jar包
  • 为什么星敏感器（Star Tracker）需要时间同步？—— 从原理到应用的全解析
  • Day04：玩转标准库中的数据处理与日志记录
  • pytest fixture基础大全详解
  • 爬虫反爬策略实战：UserAgent代理池简明指南
  • 电磁场有限元方法EX2.2-里兹法求解泊松方程控制的边值问题
  • 二刷 苍穹外卖day11
  • 讲解视频：分布滞后非线性模型DLNM​​专题：从基础到进阶学习路径
  • 记录一个QT中pro文件换行需要注意的问题
  • 第29篇：Linux审计系统深度解析：基于OpenEuler 24.03的实践指南
  • 【中文核心期刊推荐】《电子测量技术》
  • RabbitMQ使用topic Exchange实现微服务分组订阅
  • 基于SEP3203微处理器的嵌入式最小硬件系统设计
  • VBA初学习记录
  • OneCode表单架构设计：注解驱动与组件化的完美结合
  • 腾讯云认证考试报名 - TDSQL数据库交付运维专家(TCCE PostgreSQL版)