“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Twenty-one days is a good habit. It’s been twenty-one days three times, and I have to admit THAT I haven’t gotten into the habit of taking notes. But, we are still young, take your time! First summarize a development encountered in the scene, keywords are as follows Vue UL Li V-for expansion and fold up.

Demand is introduced

The page needs to display a list that can be swiped or pulled down to refresh, and the list data is returned through the back-end interface. Each list item can be divided into two parts, the values that are normally displayed and the values that are displayed by expanding and collapsing.

Technical solution

Point 1: Slide

You can use the overflow property of div

A scroll bar appears when the content exceeds the width and height:

<div style="height:300px; width:70px; overflow:auto; background:#EEEEEE;">
</div>
Copy the code

The scroll bar often displays:

<div style="height:300px; width:70px; overflow:scroll; background:#EEEEEE;">
Copy the code

Using swiper

Swiper is used in the project because it is necessary to call the initialization method after the list is swiped to consider the drop-down refresh.

Point two: Unfold and fold

Use this.$refs to get the DOM structure

<li ref="liList">
<div>XXXXXXXX The common content is XXXXXXXX</div>
<div>Contents controlled by expanding the fold button</div>
</li>



show(index){
    let zksq = this.$refs.liList.[index].childeNode[1]// Get the div node to expand the collapse control
    // Use if-else control
    zksq.style.display = block
    // zksq.style.display = none
}
Copy the code

Hide with show

Add a pair of key-values to each list item in the array returned by the back-end interface, defined as a Boolean type;

<li ref="liList" v-if="showDiv"> 
    <div>XXXXXXXX The common content is XXXXXXXX</div> 
    <div>Contents controlled by expanding the fold button</div> 
</li> 



show(index){ 
    this.showDiv = !this.showDiv
   }
Copy the code

The final choice in the project was to show and hide, where the Li content could be automatically stretched, but the outermost swiper needed to be recalculated each time it was expanded or folded. Otherwise, if all list items are expanded, the last one will be covered by the bottom, resulting in an unexpanded defect.

show(index){ 
    this.showDiv = !this.showDiv
    this.$nextTick(() = >{
        this.$refs.myswiper.swiper.update()// This method can be referred to the official website.})}Copy the code

This is a great example of how to use the this.$nextTick() method when you want to get a modified VERSION of the DOM.

conclusion

This small problem stuck for a long time, the reason is not familiar with the attributes of various elements, resulting in not flexible enough to use. Although there are still some attributes are not clear, but it is also an accumulation of experience. Share with everyone, but also deepen the impression. Next time we meet again, it will be better