由于工作需求，使用了element的走馬燈組件庫，后面又提了個需求，用到了修改走馬燈索引，特此記錄

需求：可以點擊右邊的題目題號，直接跳轉到某一條題目？

代碼：

element官方提供了setActiveItem方法，調用此方法可以改變當前播放的幻燈片。使用方法如下：

子組件

<el-carouselindicator-position="none" //此頁面為子組件height="70rem":autoplay="false"arrow="never"ref="cardShow"//重點在與ref@change="changeIndex":loop="false"></el-carousel>

?父組件：

<!-- 第一部分試題 --><div><h3>第一部分</h3><div class="myAnswer"><divclass="answer"v-for="(item, index) in solution":key="item.serial_num":style="BackColor[index] ? BackColor[index].bgColor : ''"@click="CurrentSelection(index)" //重點在這個點擊事件><div class="noun">{{ item.serial_num }}</div><!-- 答案 --><template><div class="Selected"><div>{{ onAnswer[index] ? onAnswer[index].choice : "" }}</div></div></template></div></div></div> ?<!-- 第二部分試題 --><div class="selection"><h3>第二部分</h3><div class="myAnswer"><divclass="answer"v-for="(item, inx) in BackSelection":key="inx":style="Background[inx] ? Background[inx].bgColor : ''"@click="myCurrentSelection(item.serial_num)" //重點在這個點擊事件><div class="noun">{{ item.serial_num }}</div><template><div class="Selected"><div>{{ second[inx] ? second[inx].choice : "" }}</div></div></template></div></div></div>

js

methods: {// 第二部分選擇的題目myCurrentSelection(e) { //調用子組件里的ref中的方法setActiveItemthis.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e - 1);},// 第一部分選擇的題目CurrentSelection(e) { //調用子組件里的ref中的方法setActiveItemlet a =this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e);console.log("s", a);console.log("當前選擇", e);},}

上方代碼試題和走馬燈通過current關聯，重點在于ref和setActiveItem方法。

結果：

?

點擊右邊的題目的時候，已經可以切換到對應的題目。

在一個頁面的話

<div class="bottom-box-right"><div class="campusDisplay"><span v-for="(val, key, i) in campusBuildingData" :key="i" :class="{'campus-active':current===i}" @click="changeCampusIndex(i)">{{key}}</span></div><el-carousel trigger="click" :interval='5000' arrow="never" @change="changeCampus" ref="remarkCarusel"><el-carousel-item v-for="(val, key, i) in campusBuildingData" :key="i"><Bar3D :id="'bottom-box-right-bar3d'+i" width="350px" height="300px" :campusData="val"></Bar3D></el-carousel-item></el-carousel> </div>

js

changeCampus (val) {this.current = val }, changeCampusIndex (index) {this.$refs.remarkCarusel.setActiveItem(index) }

重點還是在于ref和setActiveItem方法。

本期封面：

?

總結

以上是生活随笔為你收集整理的elemen点击时，修改走马灯的播放索引的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。