<div> <div v-for="item in list" :key="item.id" > <img :src="item.src" /> </div> </div>
<div v-if="list.length > 0"> <img v-show="list.length > 8" @click="perBtn()" src="../../assets/img/left.png" alt /> <div > <div :style="{ width: 100 * list.length + 'px', transition: 'transform 100ms linear', transform: 'translateX(' + arrIndex + 'px)', }" > <span @click="go(item, index)" v-for="(item, index) in list" :key="index" :class="bottomItem === index ? 'active' : ''" > {{ item.name }} </span> </div> </div> <img v-show="list.length > 8" @click="nextBtn(list.length, 8)" src="../../assets/img/right.png" alt /> </div> </div>
return { list: [], bottomItem: 0, arrIndex: 0, };
methods: { // 底部导航切换 go(item, index) { this.bottomItem = index; }, perBtn() { let xNum = 152; this.arrIndex = this.arrIndex + xNum; if (this.arrIndex > 0) { this.certificateWidth = 0; } }, nextBtn(length, lengthNum) { let xNum = -152; this.arrIndex = this.arrIndex + xNum; if ( (length - lengthNum) * xNum >= this.arrIndex ) { this.arrIndex = (length - lengthNum) * xNum; return; } } }
