uni-app swiper 轮播播放,滑动内容,对应内容也改变
swiper
它的相关属性uniapp里都有介绍,直接搜就可以。
这边用到的关键是这几个
@change=“current”
在methods里写这个事件,让滑动对应的页面事件id相等;后端会土工数据,根据对应的数据遍历显示出来即可。
<swiper class="swiper-box"
:indicator-dots="indicatorDots"
:autoplay="autoplay" :interval="interval"
:duration="duration" circular="true"
previous-margin="20px" next-margin="30px"
style="width: 95%;" @change="current">
@change对应的current事件(放在methods里)
current(e) {
let index = e.detail.currentItemId;
this.item = this.data[parseInt(index)];
},
接口地址:
consum() {
App.globalData._get('user/data', {}, (result) => {
this.data = result.data.user_grade;
this.current({detail:{currentItemId:0}})
});
},
onshow()里记得调用:
let _this = this;
_this.consum();
html里绑定的数据,对应的就会遍历出来: