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

需求：可以點(diǎn)擊右邊的題目題號(hào)，直接跳轉(zhuǎn)到某一條題目？

代碼：

element官方提供了setActiveItem方法，調(diào)用此方法可以改變當(dāng)前播放的幻燈片。使用方法如下：

子組件

<el-carouselindicator-position="none" //此頁(yè)面為子組件height="70rem":autoplay="false"arrow="never"ref="cardShow"//重點(diǎn)在與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)" //重點(diǎn)在這個(gè)點(diǎn)擊事件><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)" //重點(diǎn)在這個(gè)點(diǎn)擊事件><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) { //調(diào)用子組件里的ref中的方法setActiveItemthis.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e - 1);},// 第一部分選擇的題目CurrentSelection(e) { //調(diào)用子組件里的ref中的方法setActiveItemlet a =this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e);console.log("s", a);console.log("當(dāng)前選擇", e);},}

上方代碼試題和走馬燈通過current關(guān)聯(lián)，重點(diǎn)在于ref和setActiveItem方法。

結(jié)果：

?

點(diǎn)擊右邊的題目的時(shí)候，已經(jīng)可以切換到對(duì)應(yīng)的題目。

在一個(gè)頁(yè)面的話

<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) }

重點(diǎn)還是在于ref和setActiveItem方法。

本期封面：

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。