时间戳

首页 > 解决方案 > Vue.js：如何在更改 vue 轮播中的幻灯片时重新运行代码

javascript - Vue.js：如何在更改 vue 轮播中的幻灯片时重新运行代码

问题描述

我对 vue.js 很陌生，并且摸索着，如果我的条款不正确，请原谅我。我正在创建一个需要符合 ADA 标准的触摸屏应用程序（只能访问屏幕的底部，因此我必须使用按钮进行交互）。

我有一个带有轮播的父组件，它创建了一组幻灯片，从我的子组件中提取数据。

父组件 HTML

<carousel :navigateTo="selectedListIndex" @pageChange="OnPageChange">
  <slide v-for="(member, index) in selectedList" :key="index">
     <MemberBioPage :member="member"/>
  </slide>
</carousel>

父组件脚本：

export default {
  data () {
    return {
      currentPage: 0
    }
  },
  components: {
    MemberBioPage,
    Carousel,
    Slide
  },
  computed: {
    selectedList () {
      return this.$store.state.selectedList
    },
    selectedListIndex () {
      return this.$store.state.selectedListIndex
    }
  },
  methods: {
    OnPageChange (newPageIndex) {
      console.log(newPageIndex)
      this.currentPage = newPageIndex
    }
  }
}

在我的子组件中，我从我的数据和箭头按钮中提取了生物副本，这些按钮允许您滚动文本。有一个外部容器和一个内部容器来允许滚动，并根据内容在容器中占据的高度来确定箭头何时禁用。

子组件 HTML：

<div class="member-bio-page">
  <div class="bio">
    <div class="portrait-image">
       <img :src="member.imgSrc" />
    </div>
    <div class="bio-container">
      <div class="inner-scroll" v-bind:style="{top: scrollVar + 'px'}">
         <h1>{{ member.name }}</h1>
         <div class="description-container">
            <div class="para">
              <p v-html="member.shortBio"></p>
            </div>
         </div>
       </div>
     </div>
     <div class="scroll-buttons">
       <div>
       <!-- set the class of active is the scroll variable is less than 0-->
         <img class="btn-scroll" v-bind:class="{ 'active': scrollVar < 0 }" @click="scrollUp" src="@/assets/arrow-up.png">
       </div>
       <div>
         <!-- set the class of active is the scroll variable is greater than the height of the scrollable inner container-->
         <img class="btn-scroll" v-bind:class="{ 'active': scrollVar > newHeight }" @click="scrollDown" src="@/assets/arrow-down.png">
       </div>
     </div>
   </div>
</div>

子组件脚本：

<script>
export default {
  props: [
    'member', 'currentPage'
  ],
  data () {
    return {
      scrollVar: 0,
      outerHeight: 0,
      innerHeight: 0,
      newHeight: -10
    }
  },
  mounted () {
    this.outerHeight = document.getElementsByClassName('bio-container')[0].clientHeight
    this.innerHeight = document.getElementsByClassName('inner-scroll')[0].clientHeight
    this.newHeight = this.outerHeight - this.innerHeight
    return this.newHeight
  },
  methods: {
    scrollUp () {
      console.log(this.scrollVar)
      this.scrollVar += 40
    },
    scrollDown () {
      console.log(this.scrollVar)
      this.scrollVar -= 40
    },
    showVideo () {
      this.$emit('showContent')
    }
  }
}
</script>

我能够获得我查看的第一个生物的高度，但在页面更改时它会保持该设定高度。我基本上希望挂载的代码能够根据我所在幻灯片的索引重新运行。我需要“newHeight”来更新每个页面更改。我尝试使用道具从我的父组件中获取“currentPage”，但它未定义。

这是我数据中的所有片段，向您展示我目前拥有的数据：

{
  index: 12,
  name: 'Name of Person',
  carouselImage: require('@/assets/carousel-images/image.jpg'),
  imgSrc: require('@/assets/bio-page-image-placeholder.jpg'),
  shortBio: '<p>a bunch of text being pulled</p>',
  pin: require('@/assets/image-of-pin.png')
}

这也是我的商店以防万一

const store = new Vuex.Store({
  state: {
    foundersList: founders,
    chairmanList: chairmans,
    selectedList: founders,
    selectedListIndex: -1
  },
  mutations: {
    setSelectedState (state, list) {
      state.selectedList = list
    },
    setSelectedListIndex (state, idx) {
      state.selectedListIndex = idx
    }
  }
})

标签： javascriptvue.js

解决方案

好的，所以这是一个好的开始。以下是我会尝试的几件事：

  1. 将您当前拥有的代码移动mounted到一个名为calculateHeight或类似的新方法中。

  2. 从你的scrollUp和方法中调用scrollDown方法。

所以你的最终代码看起来像这样：

export default {
  props: [
    'member', 'currentPage'
  ],
  data () {
    return {
      scrollVar: 0,
      outerHeight: 0,
      innerHeight: 0,
      newHeight: -10
    }
  },
  mounted () {
    this.calculateHeight();
  },
  methods: {
    calculateHeight() {
      this.outerHeight = document.getElementsByClassName('bio-container')[0].clientHeight
      this.innerHeight = document.getElementsByClassName('inner-scroll')[0].clientHeight
      this.newHeight = this.outerHeight - this.innerHeight
    },
    scrollUp () {
      console.log(this.scrollVar)
      this.scrollVar += 40
      this.calculateHeight()
    },
    scrollDown () {
      console.log(this.scrollVar)
      this.scrollVar -= 40
      this.calculateHeight()
    },
    showVideo () {
      this.$emit('showContent')
    }
  }
}

推荐阅读