关于swiper滑动时a标签误触,导致跳转的解决办法。(简单粗暴)

博客聚焦于swiper滑动时a标签误触导致跳转的问题,并给出简单粗暴的解决办法,属于前端开发中页面交互方面的内容。
            var swiper = new Swiper('.swiper-container', {
				        on: {
			    touchStart: function(event){
			      event.stopPropagation()
			    },
			  },
			});

 

<template> <view class=""> <z-paging :paging-style="{ background: cardConfig.background }"> <!-- #ifdef H5 --> <!-- <view style="height: 90px"></view> --> <!-- #endif --> <!-- #ifndef H5 --> <view :style="{ height: navBarHeight + 'px' }"></view> <!-- #endif --> <!-- 导航栏 --> <view class="padding flex align-center justify-between"> <view @click="goback()"> <u-icon name="arrow-left"></u-icon> </view> <view class="text-bold text-df">会员中心</view> <view></view> </view> <view class="margin-top-xl"></view> <!-- 轮播图 --> <swiper @change="onSwiperChange" :autoplay="false"> <swiper-item v-for="(item, index) in 5" :key="index"> <view class="margin-lr"> <view :class="' member ' + currentClass" :data-index="index"> <!-- 进度条区域 --> <view class="flex align-end justify-start" style="height: 150px;"> <view class="padding"> <view class="text-xs padding-top-lg"> 积分:{{ userPoints }} / {{ requiredPoints }} </view> <view style="width: 420rpx;"> <u-line-progress active-color="#fff" height="12" :percent="progressPercent" :show-percent="false" width="210rpx" inactive-color="#D2C1AD" /> </view> <view class="text-xs"> 再升一级可享受【优惠券】等12项权益 </view> </view> </view> </view> </view> </swiper-item> </swiper> <!-- 会员权益 --> <view class="w-94 margin-top-lg"> <view class="text-df text-bold margin-bottom-lg">会员权益</view> <view class="text-df" style="color: #86909C;"> 1、如您需要充值余额退款服务,请点击<text class="text-black">申请余额退款</text>。工作人员审核通过后余额将原路退回到您的账户。 </view> <view class="text-df margin-top" style="color: #86909C;"> 2、如您需要充值余额退款服务,请点击<text class="text-black">申请余额退款</text>。工作人员审核通过后余额将原路退回到您的账户。 </view> </view> <!-- 会员礼包 --> <view class="w-94 margin-top-lg"> <view class="text-df text-bold">会员礼包</view> <view class="flex justify-between align-center"> <view class="margin-top coupon-bg flex justify-center align-center" style="height: 164rpx; width: 218rpx; position: relative;" v-for="item in 3" :key="item.index"> <view> <view class="text-bold" style="font-size: 40rpx; color: #2E1305;">¥42</view> <view class="margin-top-sm" style="color: #2E1305;">会员礼金</view> </view> <view class="title flex align-center justify-center">每月</view> </view> </view> </view> </z-paging> </view> </template> <script> export default { data() { return { userPoints: 5001, index: 0, navBarHeight: "" }; }, computed: { levels() { return [{ name: '白银会员', required: 1000, class: 'v1' }, { name: '黄金会员', required: 3000, class: 'v2' }, { name: '钻石会员', required: 5000, class: 'v3' }, { name: '铂金会员', required: 8000, class: 'v4' }, { name: '黑金会员', required: 15000, class: 'v5' } ]; }, // 当前用户所在的等级信息 currentLevelInfo() { const level = this.levels.slice().reverse().find(l => this.userPoints >= l.required); return level || this.levels[0]; // 至少是白银 }, // 当前等级所需积分 requiredPoints() { return this.currentLevelInfo.required; }, // 当前进度百分比 progressPercent() { return (this.userPoints / this.currentLevelInfo.required) * 100; }, // 当前应应用的类名:v0, v1, ..., v5 currentClass() { return `v${this.index +1}`; }, cardConfig() { const gradients = [ 'linear-gradient(to bottom, #BCBAC2 10%, #fff 30%)', // v1 白银 'linear-gradient(to bottom, #FFC259 10%, #fff 30%)', // v2 黄金 'linear-gradient(to bottom, #9A6FD6 10%, #fff 30%)', // v3 钻石 'linear-gradient(to bottom, #837F92 10%, #fff 30%)', // v4 铂金 'linear-gradient(to bottom, #A77A5C 10%, #fff 30%)' // v5 黑金 ]; return { background: gradients[this.index] || '' }; }, }, methods: { onSwiperChange(e) { this.index = e.detail.current; console.log('你切换了盒子', this.index); }, goback() { uni.switchTab({ url: '/pages/tabbar/my' }); } }, onLoad() { this.$nextTick(() => { // 使用新 API 兼容写法 let statusBarHeight = 20; if (uni.getWindowInfo) { statusBarHeight = uni.getWindowInfo().statusBarHeight || 20; } else { statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20; } this.navBarHeight = statusBarHeight; }); } }; </script> <style lang="scss"> /* 基础卡片样式 */ .member { position: relative; height: 150px; border-radius: 20rpx; } .v1 { background-image: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/member/v1.svg'); background-repeat: no-repeat; background-size: 100%; color: #fff; } .v2 { background-image: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/member/v2.svg'); background-repeat: no-repeat; background-size: 100%; color: #fff; } .v3 { background-image: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/member/v3.svg'); background-repeat: no-repeat; background-size: 100%; color: #fff; } .v4 { background-image: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/member/v4.svg'); background-repeat: no-repeat; background-size: 100%; color: #fff; } .v5 { background-image: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/member/v5.svg'); background-repeat: no-repeat; background-size: 100%; color: #fff; } /* 普通会员右下角图片 */ .bg-img { position: absolute; right: 0; bottom: 0; height: 266rpx; width: 244rpx; background: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/member/image.png'); background-repeat: no-repeat; background-size: 100%; } /* 礼包券背景 */ .coupon-bg { position: relative; height: 164rpx; width: 218rpx; background: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/member/couponbg.png'); background-repeat: no-repeat; background-size: 100%; .title { position: absolute; top: 0; right: 0; height: 30rpx; font-size: 18rpx; color: #fff; padding: 18rpx; min-width: 56rpx; background-color: #FFAC80; border-radius: 30rpx 0 30rpx 30rpx; } } </style> 为什么我已经是5001还是白银会员
最新发布
11-18
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值