reactjs 如何根据Div块中的项目隐藏自定义滚动按钮

hc2pp10m 于 2023-01-25 发布在 React

关注(0)|答案(2)|浏览(151)

我有一个20 items的数组。在UI中，我有两个按钮和20个项目。我的UI看起来像这样。

当单击Prev和Next按钮时，它会正确滚动。
但是现在我需要的是。当div块到达1st item时，我想隐藏prev按钮，只显示Next按钮。就像我到达最后一个20th item时一样，我想隐藏next按钮，只显示Prev按钮。在div之间，我想显示两个按钮。
我试过了，但不知道如何实现它。请帮助一些解决方案。
下面是我尝试的代码：

import { useRef } from "react";

export default function App() {
  const cardsContainerRef = useRef();
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  const onPrevorNextBtnClick = (scrollOffset) => {
    cardsContainerRef.current.scrollLeft += scrollOffset;
  };
  return (
    <div>
      <div style={{ display: "flex", gap: "10px" }}>
        <button
          onClick={() => {
            onPrevorNextBtnClick(-300);
          }}
        >
          Prev
        </button>
        <div
          ref={cardsContainerRef}
          style={{ display: "flex", gap: "10px", overflow: "hidden" }}
        >
          {data.map((item, index) => (
            <div
              style={{
                width: "100px",
                height: "100px",
                flexShrink: 0,
                backgroundColor: "green",
                color: "white"
              }}
            >
              {item}
            </div>
          ))}
        </div>

        <button
          onClick={() => {
            onPrevorNextBtnClick(300);
          }}
        >
          Next
        </button>
      </div>
    </div>
  );
}

代码沙盒链接：https://codesandbox.io/s/sweet-morning-ziweui?file=/src/App.js
要求输出：第一节第一节第一节第二节第一节第三节第一

reactjs

来源：https://stackoverflow.com/questions/75230926/how-to-hide-custom-scroll-buttons-based-on-items-in-div-block

2条答案

按热度按时间

waxmsbnn1#

你可以使用交集观察器（IO）来完成这个任务，使用IO你可以观察一个元素，并在它进入视图（或离开视图）时做出React。
因此，您可以在第一个和最后一个元素上设置IO，无论它们何时进入或离开视图，您都可以添加/删除一个显示或隐藏按钮的类。
我创建了一个基本的代码片段，你可以看到这个方法。你必须添加你的逻辑来相应地显示/隐藏按钮。我也只记录元素何时变得可见，如果你想在它从视图中出来时做出React，你必须将它也添加到回调函数中。

let options = {
  root: document.querySelector('ul'),
  threshold: 0.9
}
let callback = (entries, observer) => {
  entries.forEach(entry => {
   if (entry.isIntersecting) {
     console.log(`${entry.target.className} is intersecting`);
   }
  });
};

let observer = new IntersectionObserver(callback, options);

let targets = document.querySelectorAll('li:first-child, li:last-child');

targets.forEach(target => {
 observer.observe(target);
})

* {
padding: 0;
margin: 0;
}

ul {
  display: flex;
  overflow: auto;
  max-width: 400px;
  gap: 10px;
}

li {
list-style-type: none;
flex: 200px;
min-width: 200px;
height: 150px;
background: #b00b15;
}

<ul>

<li class="first">
 Test 
</li>

<li>
 Test 
</li>

<li>
 Test 
</li>

<li class="last">
 Test 
</li>
</ul>

赞(0）回复(0）举报 2023-01-25

vfh0ocws2#

对于下一个按钮，你可以在它上面添加一个条件，当你在[data.length-1]时，它将被隐藏。
对于"上一步“按钮，您可以在其上添加一个条件，使其在您不在数据[0]处时隐藏
下面是我示例，它对我很有效：

<button type="button" class="cursor-pointer" (click)="carrouselPrevAction()"
            *ngIf="!carrouselItems[0].active && carrouselItems.length> carrouselCards">
          </button>

 <button type="button" class="cursor-pointer" (click)="carrouselNextAction()"
            *ngIf="!carrouselItems[carrouselItems.length - 1].active && carrouselItems.length> carrouselCards">
          </button>


 carrouselPrevAction() {
    const index = this.carrouselItems.findIndex((element: any) => element.active == true)
    this.carrouselItems[index - 1].active = true;
    this.carrouselItems[index + this.carrouselCards - 1].active = false;
  }

  carrouselNextAction() {
    const index = this.carrouselItems.findIndex((element: any) => element.active == true)
    this.carrouselItems[index].active = false;
    this.carrouselItems[index + this.carrouselCards].active = true;
  }

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 如何根据Div块中的项目隐藏自定义滚动按钮

2条答案

相关问题

热门标签

最新问答