问题描述
我目前正在开发一个涉及滚动浏览来自两个不同列表的成员的应用程序。单击一个后，您将看到他们的图像和简历。我们添加了向上和向下箭头以滚动浏览他们的传记，但是当我单击向下箭头时，轮播幻灯片上的活动类似乎现在跳到数组中的最后一个成员，但仍显示我已经在其中的成员。此外，加入会员后我无法来回滑动（这是我以前可以做的事情。）我知道这可能不是最好的描述，并且我只能显示太多代码无法显示整个应用程序。
我还想指出，如果刷新页面，一切都会按预期进行。这是否意味着未正确初始化？
<template>
<div class="member-info-carousel">
<div class="header">
<h2 v-if="founderChairman === true">Member List One</h2>
<h2 v-else>Member List Two</h2>
<img src="../assets/logo.png" alt="logo" />
</div>
<carousel :minSwipedistance="384" :perPage="1" :paginationEnabled="false" :navigationEnabled="true" navigationNextLabel="<i>NEXT</i>"
navigationPrevLabel="<i>BACK</i>" :navigateto="selectedListIndex" @pagechange="OnPageChange">
<slide v-for="(member,index) in selectedList" :key="index">
<div class="member-bio-page" :member="member" v-on:showContent="showContent">
<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'}">
<div class="english"></div>
<div class="pin-name">
<img :src="member.pin" />
<h1>{{ member.name }}</h1>
</div>
<div class="description-container">
<div class="para">
<p class="quote" v-html="member.quote"></p>
<p v-html="member.bio"></p>
<div class="spanish"></div>
<p class="quote" v-html="member.spanishQuote"></p>
<p v-html="member.spanishBio"></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 > pageChangeHeight }" @click="scrollDown" src="@/assets/arrow-down.png">
</div>
</div>
<div class="eng-span">
<a href="javascript:" class="english" @click="toEnglish">English</a>
<a href="javascript:" class="spanish" @click="toSpanish">Español</a>
</div>
</div>
<div class="play-button">
<!-- if the array members has a property of video,then the play button will show on the slide. If not it will not show the image -->
<img v-if="member.hasOwnProperty('video')" @click="showContent" src="@/assets/play-button.png">
</div>
</div>
<!-- <MemberBioPage :member="member" v-on:showContent="showContent"/> -->
</slide>
</carousel>
<modal name="video-modal"
:width="1706"
:height="960">
<video width="1706" height="960" :src="(selectedList && selectedList[this.currentPage]) ? selectedList[this.currentPage].video : ''" autoplay />
</modal>
<div class="footer-controls">
<div class="footer-bar">
<p>Tap Back or Next to view additional profiles.</p>
<p>Tap the arrows to scroll text up or down.</p>
</div>
<div class="nav-container">
<img class="nav-bubble" src="@/assets/navigation-bubble-bio-page.png" alt="An image where the back,next and close button sit" />
</div>
<button class="close-button" @click="closeInfo">
<img src="@/assets/x-close-button.png" />
CLOSE
</button>
</div>
</div>
</template>
<script>
import { Carousel,Slide } from 'vue-carousel'
export default {
data () {
return {
currentPage: 0,pageChangeHeight: -10,scrollVar: 0
}
},components: {
// MemberBioPage,Carousel,Slide
},mounted () {
this.enableArrows()
},updated () {
this.enableArrows()
},computed: {
selectedList () {
return this.$store.state.selectedList
},selectedListIndex () {
return this.$store.state.selectedListIndex
},founderChairman () {
return this.$store.state.founderChairman
}
},methods: {
enableArrows () {
var outerHeight
var innerHeight
if (document.querySelectorAll('.VueCarousel-slide-active').length > 0) {
outerHeight = document.querySelectorAll('.VueCarousel-slide-active .bio-container')[0].clientHeight
innerHeight = document.querySelectorAll('.VueCarousel-slide-active .inner-scroll')[0].clientHeight
} else {
outerHeight = document.querySelectorAll('.VueCarousel-slide .bio-container')[0].clientHeight
innerHeight = document.querySelectorAll('.VueCarousel-slide .inner-scroll')[0].clientHeight
}
this.pageChangeHeight = outerHeight - innerHeight
return this.pageChangeHeight
},scrollUp () {
this.scrollVar += 40
console.log(this.scrollVar += 40)
},scrollDown () {
this.scrollVar -= 40
console.log(this.scrollVar)
},OnPageChange (newPageIndex) {
this.scrollVar = 0
this.currentPage = newPageIndex
this.pageChangeHeight = -10
},closeInfo () {
if (this.$store.state.selectedList === this.$store.state.foundersList) {
this.$store.commit('setSelectedState',this.$store.state.foundersList)
this.$router.push({ name: 'Carousel' })
} else if (this.$store.state.selectedList === this.$store.state.chairmanList) {
this.$store.commit('setSelectedState',this.$store.state.chairmanList)
this.$router.push({ name: 'Carousel' })
}
},showContent () {
this.$modal.show('video-modal')
},toEnglish () {
this.scrollVar = 0
},toSpanish () {
var spanishPos
if (document.querySelectorAll('.VueCarousel-slide-active').length > 0) {
spanishPos = document.querySelectorAll('.VueCarousel-slide-active .spanish')[0].offsetTop
} else {
spanishPos = document.querySelectorAll('.VueCarousel-slide .spanish')[0].offsetTop
}
this.scrollVar = -spanishPos
}
}
}
</script>
这是我的商店索引文件：
import Vue from 'vue'
import Vuex from 'vuex'
import chairmans from '@/data/chairmans-club'
import founders from '@/data/founders-circle'
import memoriam from '@/data/in-memoriam'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
finishedLoading: false,transitioning: false,foundersList: founders,chairmanList: chairmans,selectedList: founders,selectedListIndex: -1,founderChairman: true,inMemoriam: memoriam,idleTimer: {
id: null,duration: 1
},idleTimeoutModal: {
show: false,duration: 1
}
},mutations: {
setSelectedState (state,list) {
state.selectedList = list
},setSelectedListIndex (state,idx) {
state.selectedListIndex = idx
},showIdleTimeoutModal (state,value) {
state.idleTimeoutModal.show = value
},founderChairmanClicked (state,data) {
state.founderChairman = data
},setInMemoriam (state,content) {
state.inMemoriam = content
}
},actions: {
restartIdleTimer ({ state,commit }) {
clearTimeout(state.idleTimer.id)
state.idleTimer.id = setTimeout(() => {
commit('showIdleTimeoutModal',true)
},state.idleTimer.duration * 1000)
},stopIdleTimer ({ state }) {
clearTimeout(state.idleTimer.id)
}
}
})
export default store
以及我要提取的数据示例：
const event = [
{
index: 0,name: 'Member Name',carouselImage: require('@/assets/carousel-images/image.jpg'),drawerImage: require('@/assets/drawer-images/drawerimage.jpg'),imgSrc: require('@/assets/bio-images/bioimage.jpg'),quote: '“quote.”',spanishQuote: `“spanish quote.”`,bio: '<p>bio copy here</p>',spanishBio: '<p>spanish bio copy</p>',pin: require('@/assets/pin.png')
}
]
export default event
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）