Custom 더보기 버튼 만들기

● 실행 화면 미리보기

● 코드 작성

※ lwc026CustomPaging.html

<template>
    <div class="wrapper">
        <!-- list -->
        <div class="paging-wrap">
            <template for:each={defaultList} for:item="item" for:index="index">
                <p key={item.value} class="paging-content">{item.title} - {item.txt}</p>
            </template>
        </div>
        <!-- see-more button -->
        <template if:true={pagingDef.seeMore}>
            <button onclick={pagingSeeMore} class="custom-btn">더보기 ({pagingDef.currentPageNum} / {pagingDef.allPageNum})</button>
        </template>
    </div>
</template>

※ lwc026CustomPaging.js

import UserPreferencesRecordHomeSectionCollapseWTShown from '@salesforce/schema/User.UserPreferencesRecordHomeSectionCollapseWTShown';
import { LightningElement, track} from 'lwc';

export default class Lwc026CustomPaging extends LightningElement {

    @track defaultList = []; // 불러오는 데이터
    @track showOnceNum = 3; // 한 번에 보여주는 content 개수
    @track pagingDef = {
        seeMore : false, //더보기 버튼 활성화 여부
        currentShowNum : 0, // 현재 보여주고 있는 content 개수
        allPageNum : 0, // 전체 페이지 번호 
        currentPageNum : 1, // 현재 페이지 번호
        isRendered : false, //내용이 render이 되었는지 
        className : '.paging-content' //content class이름
    };

    connectedCallback(){
        for(let i = 0; i <10; i++){
            let newContent = {idx : i, title : ('타이틀' + i), txt : (i +'번째 내용입니다.')};
            this.defaultList.push(newContent);
        }
    }
    renderedCallback(){
        if(!this.pagingDef.isRendered){
            this.setPagingDefault(this.defaultList, this.showOnceNum, this.pagingDef);
        }
    }
    // default Paging setting
    setPagingDefault(list, intNum, pagingObj){
        pagingObj.currentShowNum = intNum;
        pagingObj.allPageNum = Math.ceil(this.defaultList.length / intNum);
        pagingObj.currentPageNum = 1;
        // console.log('setPagingDefault > pagingDef : ', this.pagingDef);
        let pagingContent = this.template.querySelectorAll(pagingObj.className);
        if(pagingContent.length != 0){
            pagingObj.isRendered = true;
            this.pagingController(list, intNum, pagingObj);
        }
    }
    // click see more button
    pagingSeeMore(){
        this.pagingDef.currentPageNum += 1;
        this.pagingController(this.defaultList, this.showOnceNum, this.pagingDef);
    }
    // control paging
    pagingController(list, intNum, pagingObj){
        pagingObj.currentShowNum = intNum * pagingObj.currentPageNum;
        if(pagingObj.currentShowNum > list.length){
            pagingObj.currentShowNum = list.length;
        }
        pagingObj.seeMore = (intNum * pagingObj.currentPageNum) < list.length;

        let pagingContent = this.template.querySelectorAll(pagingObj.className);
        console.log('pagingContent: ', pagingContent);
        pagingContent.forEach((el, index) => { 
            if(index < pagingObj.currentShowNum){
                el.style.display = 'block';
            }else{
                el.style.display = 'none';
            }
        });
    }
}

※ lwc026CustomPaging.css

.wrapper{
    width: 100%;
    max-width: 800px;
    margin: 10px auto;
    background-color: #f1f1f2;
    padding: 20px 10px;
    border-radius: 5px;
    min-height: 200px;
    box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
}
.wrapper .custom-btn{
    background-color: #6e6f72;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    color: #ffffff;
    padding: 15px 40px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
.wrapper .custom-btn:hover{
    background-color: #444549;
}
.paging-wrap p.paging-content{
    border: 1px solid #ddd;
    background-color: #FFF;
    border-radius: 5px;
    margin: 5px 0;
    padding: 5px;
}

● 실행 화면 확인