为网站做电影花絮,申请注册商标的流程,国内一家做国外酒店团购的网站,2010年最具人气的平面设计师必备网站思路#xff1a;运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息#xff0c;即节点距离页面顶部的距离#xff0c;再通过uniapp原生监听页面滚动事件onPageScroll#xff0c;获取页面内容滚动的高度#xff0c;二者相加即定位到对应节点的滚动距离… 思路运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息即节点距离页面顶部的距离再通过uniapp原生监听页面滚动事件onPageScroll获取页面内容滚动的高度二者相加即定位到对应节点的滚动距离。 1.template结构 view classcontent-tabs-boxview classcontent-tabs :class{is-fixed: isTabFixed}viewv-for(item, index) in detailTabs :keyindex classtab :class{active: curTab index} clickscrollTo(index, item.className){{item.name}}/view/view/view!-- 正文详情 --view classlibrary-detail-contentview v-iflibraryDetail.videoUrl classcontent-msgvideo :srclibraryDetail.videoUrl autoplay stylewidth: 100%; //viewview v-else classcontent-msg v-htmllibraryDetail.content/view/view!-- 相关附件 --view v-ifattachment.length 0 classlibrary-detail-attachmentview classattachment-boxview classtitle相关附件/view/viewview classattachment-list-boxview v-for(item, index) in attachment :keyindex classattchment-listview classlist-name{{ item.name }}/viewview classdownload-btn clickdownload(item.url)image src/static/images/allPolicy/download-btn.png stylewidth: 35rpx;height: 36rpx;margin-right: 10rpx; modescaleToFill /view下载/view/view/view/view/view!-- 图文解读 --view v-ifrelatedPosts.length 0 classlibrary-detail-relatedPostsview classattachment-boxview classtitle图文解读/view/viewview classattachment-list-boxview v-for(item, index) in relatedPosts :keyindex clicktoWebView(item.url, item.title) classattchment-listviewspan stylemargin-right: 20rpx;{{ postType(item.related_classify) }}/span {{ item.title }}/view/view/view/view
2.定义变量 data() {return {curTab: 0,isTabFixed: false,tabTop: 0, // tab距离顶部的距离curClassName: ,pageScrollTop: 0}},computed() {detailTabs() {let tabs [{name: 正文详情,className: .library-detail-content}]if(this.attachment this.attachment.length 0) {tabs.splice(1, 0, {name: 相关附件,className: .library-detail-attachment})}if(this.relatedPosts this.relatedPosts.length 0) {tabs.splice(2, 0, {name: 图文解读,className: .library-detail-relatedPosts})}return tabs},}
3.方法定义
// 点击tab滚动事件scrollTo(tab, className) {if(!className) returnif(this.curClassName className) returnthis.curTab tabconst query uni.createSelectorQuery().in(this);query.select(className).boundingClientRect(data {uni.pageScrollTo({scrollTop: className .library-detail-content ? 0 : (data?.top ((this.pageScrollTop || 0))),duration: 300})}).exec();this.curClassName className},// uni页面滚动监听事件onPageScroll(e) {// 获取tabs的距离顶部的距离this.tabTop uni.createSelectorQuery().select(.content-tabs).boundingClientRect(data {this.tabTop data.top;this.isTabFixed (e.scrollTop this.tabTop)this.pageScrollTop e.scrollTop}).exec();},
4.实现效果
