<template>
<view class="content">
<view class="nav">
<view :class="indicator== 0 ? 'skyblue' : '' " @tap="onnav(0)">安装信息</view>
<view :class="indicator== 1 ? 'skyblue' : '' " @tap="onnav(1)">OBD数据</view>
<view :class="indicator== 1 ? 'span spanright ' : 'span '"></view>
</view>
<swiper ref="swiper" class="swiper" :current="indicator"
@change="onchangedetail">
<swiper-item >
<view class="information">
这是第一页
</view>
</swiper-item>
<swiper-item>
<view class="nodata" v-if="!detailedlist">
<strong>这是第二页</strong>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data (){
return {
indicator:0,
}
},
methods:{
onnav(index){
this.indicator= index;
},
onchangedetail(e){
if(e.detail.source == 'touch') {
this.indicator= e.detail.current;
}
},
}
}
</script>
<style lang="scss">
</style>
官方文档 : https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
注意: 如果在 bindchange
的事件回调函数中使用 setData
改变 current
值,则有可能导致 setData
被不停地调用,因而通常情况下请在改变 current
值前检测 source
字段来判断是否是由于用户触摸引起。
所以我们只需要判断一下 e.detail.source == 'touch' 如果为空的话 ,说明不使用户手动点的买这个样我们就什么都不操作。