要素をクリックすると、カルーセルの再生インデックスを変更します

作業要件により、要素の回転灯コンポーネントライブラリが使用され、後に回転灯インデックスを変更するために使用される要件が提起されました。これをここに記録します。

要件: 右側の質問番号をクリックすると、特定の質問に直接ジャンプできますか?

コード：

要素は公式にsetActiveItemメソッドを提供しており、このメソッドを呼び出すと現在再生中のスライドショーを変更できます。使用方法は次のとおりです。

サブアセンブリ

<el-carousel
      indicator-position="none"  //此页面为子组件
      height="70rem"
      :autoplay="false"
      arrow="never"
      ref="cardShow"//重点在与ref
      @change="changeIndex"
      :loop="false"
    >
    </el-carousel>

親コンポーネント:

<!-- 第一部分試題 -->
        <div>
          <h3>第一部分</h3>
          <div class="myAnswer">
            <div
              class="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">
            <div
              class="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>

         methods: {
    // 第二部分选择的题目
    myCurrentSelection(e) { //调用子组件里的ref中的方法setActiveItem
      this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e - 1);
    },
    // 第一部分选择的题目
    CurrentSelection(e) { //调用子组件里的ref中的方法setActiveItem
      let a =
        this.$refs["examinationQuestions"].$refs.cardShow.setActiveItem(e);
      console.log("s", a);
      console.log("当前选择", e);
    },
    }

上記のコードテストの問題は電流を通す走馬灯に関連しており、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>

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

焦点は依然として手法refにあります。setActiveItem

この号の表紙:

要素をクリックすると、カルーセルの再生インデックスを変更します

おすすめ