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-indexes 只能全局展示,如果顶部有内容t-indexes被scroll-view包裹展示的话页面效果不能生效 #2625

Open
lisashare opened this issue Mar 5, 2024 · 6 comments
Labels
enhancement New feature or request

Comments

@lisashare
Copy link

这个功能解决了什么问题

t-indexes 只能全局展示,如果顶部有内容t-indexes被scroll-view包裹展示的话页面效果不能生效

你建议的方案是什么

支持顶部有内容,scroll-view包裹后点击侧边栏及吸顶效果不失效

Copy link
Contributor

github-actions bot commented Mar 5, 2024

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

@anlyyao
Copy link
Collaborator

anlyyao commented Mar 7, 2024

@lisashare 提供一下可复现代码片段吧~

@lisashare
Copy link
Author

@anlyyao 你好,不好意思 是我写错布局了,并不需要使用scroll-view包裹内容。
我又试了一下,问题bug是:顶部有position:fixed; 定位点击侧边描点元素,回到顶部,滚动条滚动位置错位(差了固定内容的高度)。不知道是不是我写样式写的不对。

这是单独的文件,其余的在项目里面不好分割。
test.zip
代码效果图
17098047634305

这是我的需求效果:https://github.com/Tencent/tdesign-miniprogram/assets/37070480/0930e16a-da6f-4271-82f1-6bbf8b501c90

@Kenjiang110
Copy link

我也想实现这个效果,但t-indexes放到scroll-view后,就不正常了:

<t-search placeholder="查找..." leftIcon="search" bind:change="onSearchCity" bind:clear="onSearchCity" />
<t-cell left-icon="location" title="{{selectedCity}}">
  <t-button slot="right-icon" size="small" content="重新定位" shape="round" />
</t-cell>
<scroll-view class="indexes-container" scroll-y>
  <empty-list description="没有符合条件的城市~" show="{{!indexList.length}}" />
  <t-indexes index-list="{{indexList}}" sticky="{{false}}">
    <block wx:for="{{indexCities}}" wx:key="index">
      <t-indexes-anchor index="{{item.index}}" />
      <t-cell-group>
        <t-cell
          wx:for="{{item.children}}"
          wx:key="city"
          wx:for-item="city"
          title="{{city.displayName}}"
          data-city="{{city}}"
          aria-role="button"
          bind:click="onCityClick"
          right-icon="{{city.displayName == selectedCity? 'check': true}}"
          t-class-right-icon="check"
        />
      </t-cell-group>
    </block>
  </t-indexes>
</scroll-view>
page {
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  height: 100vh;
}

.indexes-container {
  flex: 1;
}

期望:
t-search和t-button(重新定位)固定在上方

结果:
1)t-indexes滚动到最下方时,最下方两行不显示,继续滚动,上方t-search和t-button消失,最下方两行出现。
2)t-indexes-anchor无论点击哪个,都只能点击到第一个索引。

@lisashare
Copy link
Author

@Kenjiang110 我视频的效果最后用的是skyline

@Kenjiang110
Copy link

Kenjiang110 commented Jun 18, 2024

@Kenjiang110 我视频的效果最后用的是skyline

用了你test.zip中的代码,css偏移、padding对于t-indexes-anchor是无效的,还是会定位到页面顶端。顶部内容只是sticky到indexes上面,挡住了而已。

@anlyyao anlyyao added the enhancement New feature or request label Aug 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants