自定义swiper微信小程序报thirdScriptError Cannot set property 'query' of undefined;at "pages/swiper/swiper" page lifeCycleMethod onLoad function
在web端运行正常,在微信小程序swiper切换时不会更新分页项
具体代码
<template>
<view class="swiper-container">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="change">
<swiper-item v-for="item in banner" :key="item.id">
<view class="swiper-item uni-bg-red">
<image :src="item.image" mode=""></image>
<p>{{item.text}}</p>
</view>
</swiper-item>
</swiper>
<view class='swiper-dot'>
<view class="swiper-dot-item" v-for="(item,index) in banner" :key="item.id" v-bind:class="current==index?'swiper-dot-item-active':''" ></view>
</view>
</view>
</template>
<script>
var self;
export default{
data(){
return{
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 500,
current:0,
banner:[
{
"id":1,
"image":"../../static/image/banner1.png",
"text":"足球 | 利物浦 VS 热刺 1"
},{
"id":2,
"image":"../../static/image/banner1.png",
"text":"足球 | 利物浦 VS 热刺2"
},{
"id":3,
"image":"../../static/image/banner1.png",
"text":"足球 | 利物浦 VS 热刺3"
}
]
}
},
onLoad(){
},
// props:['banner'],
methods:{
change(e){
this.current = e.detail.current;
console.log(this.current)
}
}
}
</script>
<style>
.swiper-container{position: relative;height: 280upx;}
.swiper{position: absolute;height: 100%;width: 100%;}
.swiper image{width: 100%;height: 280upx;}
.swiper p{position: absolute;bottom:0;height: 55upx;line-height: 55upx;color: #fff;background: rgba(0,0,0,0.5);width: 100%;font-size: 26upx;text-indent: 30upx;}
.swiper-dot{position: absolute;bottom:22upx;right:20upx;height: 6upx;z-index: 9;display: flex;}
.swiper-dot-item{width: 20upx;height: 6upx;margin-left:6upx;background: rgba(255,255,255,0.3);}
.swiper-dot-item-active{background:rgba(255,255,255,1) ;}
</style>
z***@qq.com (作者)
后面重新整理下又不会了可能是npm了其他包有影响,谢谢
2019-04-25 16:32