index.nvue
<template>
<view class="content">
<swiper style="height: 300px;">
<swiper-item>
<waterfall column-count="2" column-width="auto">
<cell v-for="(num, index) in lists" :key="index">
<navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">
<text>{{ num }}</text>
</navigator>
</cell>
</waterfall>
</swiper-item>
<swiper-item>
<waterfall column-count="2" column-width="auto">
<cell v-for="(num, index) in lists" :key="index">
<navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">
<text>{{ num }}</text>
</navigator>
</cell>
</waterfall>
</swiper-item>
</swiper>
<swiper style="height: 300px;">
<swiper-item>
<list>
<cell v-for="(num, index) in lists" :key="index">
<navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">
<text>{{ num }}</text>
</navigator>
</cell>
</list>
</swiper-item>
<swiper-item>
<list>
<cell v-for="(num, index) in lists" :key="index">
<navigator url="play" class="list" :class="index % 2 == 1 ? 'bgc1' : 'bgc2'">
<text>{{ num }}</text>
</navigator>
</cell>
</list>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
lists: ['A', 'B', 'C', 'D', 'E', 'A1', 'B1', 'C1', 'D1', 'E1', 'A2', 'B2', 'C2', 'D2', 'E2', 'A3', 'B3', 'C3', 'D3', 'E3', 'A4', 'B4', 'C4', 'D4', 'E4']
};
},
onLoad() {},
methods: {}
};
</script>
<style>
.list {
height: 240px;
margin: 5px;
}
.bgc1 {
background-color: rgba(255, 255, 0, 0.5);
}
.bgc2 {
background-color: rgba(0, 255, 255, 0.5);
}
</style>
play.vue
<template>
<view>
<video src="https://www.w3school.com.cn/i/movie.mp4" controls></video>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
DCMarvel (作者)
代码我不是发了么.....
下边附件是代码及录屏视频.
2021-12-07 18:42
DCloud_Android_ST
回复 DCMarvel: 以后直接提供demo然我们闭嘴只复现问题就好了。相对来说响应速度和bug确认会更快
2021-12-07 19:02
DCloud_Android_ST
大致原因清楚了 因为横竖屏导致重新排版 我们看下问题如何解决
2021-12-07 19:08