HarmonyOS 鸿蒙Next List 容器组件怎么自动滑动到下一个 Item 或者弹回？

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next List 容器组件怎么自动滑动到下一个 Item 或者弹回？

在使用 List 的组件时发现，当滑动当前 Item 超出屏幕不到一半或者超出一半时，并没有自动弹回或者滑出下一个 Item。是需要设置什么属性吗？如下图所示，当前图片已经滑出屏幕超过一半，但是松手后当前界面停留在了当前位置。

cke_4092.png

Harmonyos Next教程
10 回复
List().scrollSnapAlign(ScrollSnapAlign.CENTER)可实现自动居中。

这样可以实现需求效果吗？我试试。🤝🤝🤝

可以。感谢

不客气~

使用List组件时，如果希望实现自动回弹到当前Item或者滑出到下一个Item的效果，可以使用ScrollView配合List来实现这个功能。具体可以通过设置ScrollView的属性来实现。

[@Entry](/user/Entry)
[@Component](/user/Component)
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);

    ListContainer listContainer = <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> ListContainer(getContext());
    listContainer.setItemProvider(<span class="hljs-keyword"><span class="hljs-keyword">new</span></span> ItemProvider());

    <span class="hljs-comment"><span class="hljs-comment">// 创建ScrollView</span></span>
    ScrollView scrollView = <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> ScrollView(getContext());
    scrollView.setComponentSize(MATCH_PARENT, MATCH_PARENT);
    scrollView.addComponent(listContainer);
    
    <span class="hljs-comment"><span class="hljs-comment">// 添加滚动监听器</span></span>
    scrollView.addScrollListener(<span class="hljs-keyword"><span class="hljs-keyword">new</span></span> ScrollView.ScrollListener() {
        @Override
        public <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> onScrolled(int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
            <span class="hljs-comment"><span class="hljs-comment">// 计算是否需要自动回弹或滚动到下一个Item</span></span>
            <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (scrollY &gt; oldScrollY) {
                <span class="hljs-comment"><span class="hljs-comment">// 向下滚动</span></span>
                <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (scrollY &gt; listContainer.getItemHeight() / <span class="hljs-number"><span class="hljs-number">2</span></span>) {
                    scrollView.scrollTo(<span class="hljs-number"><span class="hljs-number">0</span></span>, listContainer.getItemHeight());  <span class="hljs-comment"><span class="hljs-comment">// 滚动到下一个Item</span></span>
                } <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
                    scrollView.scrollTo(<span class="hljs-number"><span class="hljs-number">0</span></span>, <span class="hljs-number"><span class="hljs-number">0</span></span>);  <span class="hljs-comment"><span class="hljs-comment">// 回弹到当前Item</span></span>
                }
            } <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
                <span class="hljs-comment"><span class="hljs-comment">// 向上滚动</span></span>
                <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (scrollY &lt; -listContainer.getItemHeight() / <span class="hljs-number"><span class="hljs-number">2</span></span>) {
                    scrollView.scrollTo(<span class="hljs-number"><span class="hljs-number">0</span></span>, -listContainer.getItemHeight());  <span class="hljs-comment"><span class="hljs-comment">// 滚动到上一个Item</span></span>
                } <span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
                    scrollView.scrollTo(<span class="hljs-number"><span class="hljs-number">0</span></span>, <span class="hljs-number"><span class="hljs-number">0</span></span>);  <span class="hljs-comment"><span class="hljs-comment">// 回弹到当前Item</span></span>
                }
            }
        }

        @Override
        public <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> onScrollFinished() {
            <span class="hljs-comment"><span class="hljs-comment">// 滚动结束时的处理</span></span>
        }
    });

    super.setUIContent(scrollView);
}

private <span class="hljs-keyword"><span class="hljs-keyword">class</span></span> ItemProvider extends BaseItemProvider {
    @Override
    public int getCount() {
        <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-number"><span class="hljs-number">20</span></span>;  <span class="hljs-comment"><span class="hljs-comment">// Item的数量</span></span>
    }

    @Override
    public <span class="hljs-built_in"><span class="hljs-built_in">Object</span></span> getItem(int position) {
        <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-literal"><span class="hljs-literal">null</span></span>;
    }

    @Override
    public long getItemId(int position) {
        <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> position;
    }

    @Override
    public Component getComponent(int position, Component convertView, ComponentContainer parent) {
        <span class="hljs-comment"><span class="hljs-comment">// 创建Item的布局和内容</span></span>
        <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (convertView == <span class="hljs-literal"><span class="hljs-literal">null</span></span>) {
            DirectionalLayout layout = <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> DirectionalLayout(getContext());
            Text text = <span class="hljs-keyword"><span class="hljs-keyword">new</span></span> Text(getContext());
            text.setText(<span class="hljs-string"><span class="hljs-string">"Item "</span></span> + position);
            layout.addComponent(text);
            convertView = layout;
        }
        <span class="hljs-keyword"><span class="hljs-keyword">return</span></span> convertView;
    }
}

}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

好的我试一下，感谢！

用swiper更好

考虑应用场景选择了 List

这么看来 List 没有自带这个特性，可能是我误解了

HarmonyOS 鸿蒙Next List容器组件要实现自动滑动到下一个Item或弹回，可以通过ScrollView配合List组件，并设置适当的滚动行为。使用List的滚动事件监听（如onScroll或onScrollIndex）和ScrollView的滚动控制方法（如scrollTo）来实现。确保在滑动事件触发时，正确计算并应用滚动偏移量。如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部