console
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="" type="image/x-icon" />
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.8.7/lib/vant.min.js">
</script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
html,
body {
height: 100%;
background-color: rgb(248, 248, 248);
}
body {
max-width: 640px;
margin: auto;
}
.app,
.contentView {
height: 100%;
position: relative;
}
.info{
padding: 2em;
}
.van-row{
text-align: center;
}
</style>
</head>
<body>
<div class="app" id="app" v-show="loadShow" style="display: none;">
<van-swipe ref="swipe" class="my-swipe" :autoplay="5000" :show-indicators="false">
<van-swipe-item v-for="(item,i) in audio" :key="i">
<div class="APlayer"></div>
<div v-if="i<=0" class="info">
<span style="color:#1989fa">进度条可以点击</span>
</div>
<div v-else class="info">
<span style="color:#ee0a24">进度条可以不可以点击</span>
</div>
</van-swipe-item>
</van-swipe>
<van-row>
<van-col span="12">
<van-button @click="$refs.swipe.prev()" type="default">上一页</van-button>
</van-col>
<van-col span="12">
<van-button @click="$refs.swipe.next()" type="default">下一页</van-button>
</van-col>
</van-row>
<div class="info">
<span>原因：是由于父元素的<van-tag>transform: translateX</van-tag>属性，导致<van-tag>clientX</van-tag>值错误</span>
</div>
<div class="info">
<span>解决1：将<van-tag>transform: translateX</van-tag>改为<van-tag>margin-left</van-tag></span>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
index:0,
loadShow:false,
audio: [{
name: '光るなら',
artist: 'Goose house',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
theme: '#ebd0c2'
}, {
name: 'トリカゴ',
artist: 'XX:me',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
theme: '#46718b'
}, {
name: '前前前世',
artist: 'RADWIMPS',
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
theme: '#505d6b'
}]
},
mounted() {
this.loadShow = true;
this.$nextTick(()=>{
const arrayDom = document.querySelectorAll('.APlayer');
for (var index = 0; index < arrayDom.length; index++) {
const audioInfo = this.audio[index];
new APlayer({
loop:"none",
container: arrayDom[index],
audio: [audioInfo]
});
}
})
},
})
</script>
</body>
</html>