<template>
<view :class="showMask? 'jasmine-pages control-scroll':'jasmine-pages'">
<!-- 会员轮播图 start -->
<view class="j-member">
<view class="j-member-top">
<view class="j-member-item">
<view class="j-member-tabs" v-for="(item,index) in memberTabsList" :key="index"
@click="getTabIndex(index)" :class="[
(tabIndex == index && tabIndex == 0) ? 'tabIndex-1' : '',
(tabIndex == index && tabIndex == 1) ? 'tabIndex-2' : '',
(tabIndex == index && tabIndex == 2) ? 'tabIndex-3' : '']">
{{item}}
</view>
</view>
</view>
<view class="j-member-con" @click="toMemberCenterPage">
<swiper class="j-member-swiper" :current="tabIndex" :autoplay="autoplay" :indicator-dots="false"
:interval="3000" :duration="500" circular='true' @change="getSwiperChange">
<swiper-item class="swiper-item" v-for="(item,index) in [0,1,2]" :key="index">
{{item}}
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
memberTabsList: ['入会尊享礼券', 'GET艺人周边', '积分商城'],
tabIndex: 0, // tabs索引
swiperTabIndex: 0, // 轮播图索引
autoplay:true,
};
},
onLoad(options) {
},
onShow() {
this.autoplay = true
},
onHide() {
// 已找到解决方法,在离开页面的时候,关闭swiper自动轮播
// this.autoplay = false
},
methods: {
// 获取索引
getTabIndex(id) {
this.tabIndex = id
},
//轮播对应tab
getSwiperChange(e) {
this.tabIndex = e.detail.current;
},
}
}
</script>
<style lang="less">
/deep/.u-popup__content {
background-color: rgba(255, 255, 255, 0) !important;
}
</style>
<style lang="less" scoped>
.jasmine-pages {
width: 750rpx;
min-height: 2123rpx;
background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-bgc1.png) no-repeat 100% 0 #f0fae6;
background-size: 100%;
padding-top: 1245rpx;
.j-member {
position: relative;
margin-bottom: 200rpx;
.j-member-top {
width: 677rpx;
height: 66rpx;
margin: 0 auto;
// background-color: pink;
// border-radius: 31rpx;
display: flex;
align-items: center;
justify-content: space-around;
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #22441C;
position: relative;
.j-member-item {
height: 66rpx;
width: 677rpx;
background: linear-gradient(0deg, #F3FFE4 0%, #FFFFFF 100%);
border-radius: 31rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.j-member-tabs {
width: 33%;
text-align: center;
height: 66rpx;
line-height: 66rpx;
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #22441C;
position: relative;
}
.tabIndex-1:before {
content: "";
display: block;
position: absolute;
top: -38%;
left: -1%;
width: 250rpx;
height: 103rpx;
background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-tabIndex-11.png) no-repeat;
background-size: 100%;
}
.tabIndex-2:before {
content: "";
display: block;
position: absolute;
top: -38%;
left: -1%;
width: 250rpx;
height: 103rpx;
background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-tabIndex-2.png) no-repeat;
background-size: 100%;
}
.tabIndex-3:before {
content: "";
display: block;
position: absolute;
top: -38%;
left: -1%;
width: 250rpx;
height: 103rpx;
background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-tabIndex-33.png) no-repeat;
background-size: 100%;
}
}
.j-member-con {
width: 675rpx;
height: 455rpx;
margin: 43rpx auto 0;
border-radius: 24rpx;
overflow: hidden;
background-color: pink;
}
}
}
.control-scroll {
height: 100vh !important;
overflow-y: hidden !important;
}
// }
</style>
- 发布:2022-10-20 14:47
- 更新:2022-10-20 14:47
- 阅读:129
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 企业版
HBuilderX类型: 正式
HBuilderX版本号: 3.2.16
第三方开发者工具版本号: 1.06.2209190
基础库版本号: 2.26.2
项目创建方式: HBuilderX
示例代码:
操作步骤:
通过到同事的电脑复现(最新版本的Hbuilder和微信开发这工具),发现也有该bug的存在
自己电脑通过该方法,通过微信开发者工具,写原生的微信小程序轮播图,发现没有该bug
通过到同事的电脑复现(最新版本的Hbuilder和微信开发这工具),发现也有该bug的存在
自己电脑通过该方法,通过微信开发者工具,写原生的微信小程序轮播图,发现没有该bug
预期结果:
在onHide生命周期,离开页面的时候,将swiper的autoplay属性设置为false,以关闭轮播图的自动循环
在onHide生命周期,离开页面的时候,将swiper的autoplay属性设置为false,以关闭轮播图的自动循环
实际结果:
通过onHide生命周期的方式,达到预期效果,bug解决
通过onHide生命周期的方式,达到预期效果,bug解决
bug描述:
页面通过采用swiper组件,通过下标,实现和另外一个区域的元素进行相关联,
但是切换应用,大约10S后再返回小程序应该,会导致索引反复错乱
0 个回复