Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

t-tabs,吸顶效果在scroll-view设置了refresher-enabled="{{true}}"之后,拖动到吸顶位置,就消失不见了 #3100

Open
guoyutao opened this issue Aug 27, 2024 · 3 comments

Comments

@guoyutao
Copy link

tdesign-miniprogram 版本

1.6.0

重现链接

No response

重现步骤

<scroll-view
id="scrollview"
class="scroll_area"
type="custom"
scroll-y
style="width: 100vw;"
show-scrollbar="{{false}}"
enhanced="{{true}}"
refresher-enabled="{{true}}"
refresher-threshold="{{50}}"
refresher-default-style="none"
refresher-triggered="{{triggered}}"
bind:refresherpulling="onPulling"
bind:refresherrefresh="onRefresh"
bind:refresherrestore="onRestore"
bind:refresherabort="onAbort"
bind:refresherstatuschange="onStatusChange"
worklet:onstartstart="handleScrollStart"
worklet:onscrollupdate="handleScrollUpdate"
worklet:onscrollend="handleScrollEnd"
bindscrolltolower="bindScrollTolower"

<t-tabs
defaultValue="{{0}}"
sticky
stickyProps="{{stickyProps}}"
bind:change="onTabsChange"
bind:click="onTabsClick"
bind:scroll="onStickyScroll"
t-class="custom-tabs"

期望结果

No response

实际结果

No response

基础库版本

No response

补充说明

No response

Copy link
Contributor

👋 @guoyutao,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@jarmywang
Copy link
Collaborator

@guoyutao 感谢反馈,我这里试了下拉刷新后tabs正常显示,Webview和Skyline都可以,你是因为没有给scrollview设置高度?可以提供一个最小复现片段以及视频我们再看看

@guoyutao
Copy link
Author

@guoyutao 感谢反馈,我这里试了下拉刷新后tabs正常显示,Webview和Skyline都可以,你是因为没有给scrollview设置高度?可以提供一个最小复现片段以及视频我们再看看

wxml

<scroll-view
id="scrollview"
class="scroll_area"
type="custom"
scroll-y
style="width: 100vw;height: 700px;"
show-scrollbar="{{false}}"
enhanced="{{true}}"
refresher-enabled="{{true}}"
refresher-threshold="{{50}}"
refresher-default-style="none"
refresher-triggered="{{triggered}}"
bind:refresherpulling="onPulling"
bind:refresherrefresh="onRefresh"
bind:refresherrestore="onRestore"
bind:refresherabort="onAbort"
bind:refresherstatuschange="onStatusChange"
worklet:onstartstart="handleScrollStart"
worklet:onscrollupdate="handleScrollUpdate"
worklet:onscrollend="handleScrollEnd"
bindscrolltolower="bindScrollTolower"

<t-tabs
defaultValue="{{0}}"
sticky
stickyProps="{{stickyProps}}"
bind:change="onTabsChange"
bind:click="onTabsClick"
bind:scroll="onStickyScroll"
t-class="custom-tabs"

js
const app = getApp()

Page({
data: {
stickyProps: {
zIndex: 2,
offsetTop: 100,
contianer:""
},
},
onLoad() {
console.log('代码片段是一种迷你、可分享的小程序或小游戏项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档:')
console.log('https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html')
this.setData({
stickyProps: {
zIndex: 9999999999999,
offsetTop: 100,
contianer:() => this.createSelectorQuery().select('.scroll_area')
},
});
},

onStickyScroll(event) {
console.log(event.detail);
},
})

wxss
page{
overflow-y: auto;
}

.link-example {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 96rpx;
background-color: var(--bg-color-demo);
}

.custom-tabs {
z-index: 9999999999;
background-color: red;
}

json
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar",
"t-tabs": "tdesign-miniprogram/tabs/tabs",
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
"t-link": "tdesign-miniprogram/link/link"
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants