<template>
<view class="detail">
<LDHeader title="详情" background="transparent" :isPlaceholder="false">
<template slot="right">
<view class="detail__header--right">
<view class="detail__header--handle">
<view class="detail__header--handle-dot" />
<view class="detail__header--handle-dot" />
<view class="detail__header--handle-dot" />
</view>
</view>
</template>
</LDHeader>
<view class="main">
<swiper :current="practiceIndex" vertical class="main__swiper" :style="swiperStyle" @change="changeSwiper">
<swiper-item v-for="(item,index) in practiceList" :key="index" :item-id="index" class="main__swiper--item">
<DetailContent :ref="`content_${index}`" :currentIndex="index" />
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
import LDHeader from '@/components/LD-navbar-nvue/index.nvue'
import DetailContent from '../components/detail-content/index.nvue'
export default {
components: {
LDHeader,
DetailContent
},
data() {
return {
practiceIndex: 0, // 当前习作索引
practiceList: [], // 当前显示习作列表
};
},
computed: {
swiperStyle() {
const systemInfo = uni.getSystemInfoSync()
return `width: ${ systemInfo.screenWidth }px;height: ${ systemInfo.screenHeight }px;`
}
},
methods: {
// 切换习作
changeSwiper($event) {
this.$refs[`content_${this.practiceIndex}`][0].glideOutVideo()
this.practiceIndex = $event.detail.current
this.$refs[`content_${this.practiceIndex}`][0].glideVideo()
},
},
onReady() {
this.practiceList = [1,2,3,4,5,6,7,8,9,10]
this.$nextTick(() => {
this.$refs[`content_${this.practiceIndex}`][0].glideVideo()
})
}
}
</script>
<style lang="scss" scoped>
.detail {
background-color: #000;
&__header {
&--right {
position: relative;
}
&--handle {
@include flex(row);
justify-content: center;
align-items: center;
padding: sizing(20) sizing(10);
&-dot {
@include square-image(8);
border-radius: sizing(4);
background-color: #fff;
margin: 0 sizing(5);
}
}
}
}
</style>
大B
- 发布：2022-03-01 10:01
- 更新：2022-03-01 10:49
- 阅读：621
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 2.0.1-33520211229002
HBuilderX类型： 正式
HBuilderX版本号： 3.3.5
手机系统： Android
手机系统版本号： Android 9.0
手机厂商： 小米
手机机型： MI
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
上下滑动即可复现
上下滑动即可复现
预期结果：
上下滑动丝滑
上下滑动丝滑
实际结果：
安卓 上下滑动难以滚动
安卓 上下滑动难以滚动
bug描述：
nvue 使用 swiper 防抖音视频滑动，在安卓端上下滑动很困难，iOS没有任何问题。是什么原因呢？
大B (作者)
只要是 swiper 就可以复现的
2022-03-01 10:22
大B (作者)
我不知道怎么上传测试工程
2022-03-01 10:22
BoredApe
回复 大B: 新建一个测试工程，编写能重现问题的测试代码。将此工程上传上来。
2022-03-01 10:25
大B (作者)
回复 BoredApe: 看下我心评论的 附件
2022-03-01 10:30