当前页面的swiper滑动切换(手动、点击滑动均可)
<template>
<view class="content">
<view class="nav">
<view :class="current== 0 ? 'skyblue' : '' " @tap="onnav(0)">当前课程</view>
<view :class="current== 1 ? 'skyblue' : '' " @tap="onnav(1)">历史课程</view>
<!-- //注:回调函数,当你轻触(tap)Swiper后执行。在移动端,click会有 200~300 m延迟,所以请用tap代替click作为点击事件。接受swiper实例和touchend事件作为参数 -->
<view :class="current== 1 ? 'span spanright' : 'span'"></view>
</view>
<!-- 页面内容 -->
<swiper :current="current" @change="onchange">
<!-- 当前课程页面内容 -->
<swiper-item>
<view>
第一个页面
</view>
</swiper-item>
<!-- 历史课程页面内容 -->
<swiper-item>
<view>
<view>第二个页面</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
// data() {
// return {
// title: '课程',
// data: {},
// }
// },
data(){
return {
current:0,
}
},
onLoad() {
this.getData();
},
methods: {
onnav(index) {
this.current = index;
},
onchange(e){
this.current = e.detail.current;
}
}
}
</script>
<style lang="scss">
.nav{
width: 375px;
height: 50px;
opacity: 1;
color: rgba(0,0,0,0.60);
font-weight: 400;
view:nth-child(1),:nth-child(2){
float: left;
width: 56px;
height: 16px;
opacity: 1;
font-size: 14px;
text-align: LEFT;
padding: 17px 0;
}
view:nth-child(1){
margin-left: 104px;
}
view:nth-child(2){
margin-left: 54px;
}
.span {
width: 56px;
height: 2px;
opacity: 1;
position: absolute;
background-color: #5699e7;//课程滑动下面的横线
top: 38px;
margin-left: 104px;
transition: ease-in-out .2s;
transform: translateY(100%);
}
.spanright {
left: 110px;
}
.skyblue {
color: #5699E7;
font-weight: 700;
}
}
</style>