关于vux组件中swiper实现的 banner图如何点击跳转

最新推荐文章于 2022-01-20 16:59:25 发布
最新推荐文章于 2022-01-20 16:59:25 发布
阅读量795 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44227395/article/details/103822154
版权

用vux组件中的swiper插件，实现了banner图的效果。还要求，点击banner图的图片，可以跳转到详情页面，这里banner图的数据，由后端传过来。
后端传过来的数据如图所示：
在这里插入图片描述
需要将数据里面的参数id传出，让详情页面获取到
本来想给swiper绑定点击事件，绑定之后，点击没有反应，具体原因我也不知道是为什么
在这里插入图片描述

解决方法：
这是对接后端接口获取数据，原来的代码
在这里插入图片描述
这是修改之后，只多了一行代码
在这里插入图片描述
只要给后端传过来的数据中添加url就可以了，url可以写当前图片的id，用url将参数id传出，不用点击事件，也可以点击之后带参数id跳转

添加url后，可以看到后台数据变成这样了
在这里插入图片描述
后端传过来数据，是可以修改添加的

程序鲤
关注
uni-app - uview Swiper 轮播图组件点击跳转链接（点击后拿到 item 行数据, 取出数据做操作）
王佳斌
08-09 4613
uni-app - uview Swiper 轮播图组件点击跳转链接解决方案（点击后拿到 item 行数据, 取出数据做操作），uView轮播图跳转，uview Swiper 轮播图组件点击轮播图时，跳转到详情或链接（点击执行操作），uview,轮播图点击跳转其它网页，uview swiper轮播图片如何添加点击跳转功能，uview,轮播图点击跳转网页,这样去写代码可以轻松实现，怎么实现点击轮播图后拿到 id，从而跳转页面详情，uniapp 点击轮播图跳转商品详情页面，用uni-app写了h5项目,使用了轮
vux uploader 图片上传组件的安装使用方法
08-27
Vux Uploader是一款基于Vue.js的图片上传组件，它提供了丰富的功能和自定义选项，适合在移动端应用中使用。在本文中，我们将详细介绍如何安装和使用Vux Uploader。 首先，要在项目中安装Vux Uploader，你需要通过...
小程序开发swiper如何实现点击图片自定义跳转
weixin_30407099的博客
03-12 1129
https://www.szfangwei.cn/news/4278.html 转载于:https://www.cnblogs.com/yanyunliu/p/10520339.html
swiper banner图循环（loop）播放+banner图点击跳转有时成功有时失效
yangzixiansheng的博客
06-24 497
环境：nuxt项目，vue语法 前置条件：npm install swiper 在页面 @import “swiper/css/swiper.css”; 在初始化swiper时加入loop：true；（这会复制一个slide。用可以用realIndex确定真实索引） 在div加入swiper的class，在该div绑定@click 出现的坑：可以一直切换上下一页，loop没问题。比如下一页点击几次，点击banner图想跳转，跳转失效。如果下一页只点击一次，是可以跳转的 解决办法：不用在div绑定click，
【练习】swiper中点击后跳转详细页面，tab栏，嵌套template
weixin_40326021的博客
04-14 2001
1.swiper中点击后跳转详细页面 1）在每个swiper-item中的image添加自定义属性data-postId，并添加函数跳转 <image src="/images/1.jpg" catchtap='onPostTap' data-postId="0"></image> 此时data-postId不能用{{item.postId}}因为，没有循环，post...
vux的轮播图
weixin_44817180的博客
10-26 437
<div class="first-header-class"> <swiper height="150px" dots-position="center" :loop="true" :auto="true" :show-dots="false"> <swiper-item v-for="(item,index) in swiperList" :key="index" > <img :src=.
微信小程序swiper点击轮播图实现跳转；其他页面跳转不成功的原因
pc1532217526的博客
03-22 6442
文章目录微信小承程序swiper点击轮播图实现跳转用navigator的两个问题轮播图跳转最终版微信小程序页面跳转不成功的原因问题简述原因概述 微信小承程序swiper点击轮播图实现跳转 用navigator的两个问题 昨晚写一个小程序的首页，涉及到轮播图，而我将所有的图片以数组的形式放在js中的，官方文档只给出了navigator的超链接，但是我当时使用时跳转不了： 第一次代码如下，报错Unc...
vue轮播图实现点击图片跳转到外部链接
weixin_43719616的博客
06-04 6018
需求：点击轮播图中的图片跳转到外部链接，比如跳转到csdn首页。 实现： 1.写出大体框架 <template> <el-carousel :interval="4000" height="400px" ref="carousel" @click.native="linkTo"> <el-carousel-item v-for="item in imgs" :key="item.url" > <img :src="item.url"/&gt
基于Vue框架vux组件库实现上拉刷新功能
11-27
在本项目中，我们利用Vux中的`scroller`组件来实现上拉刷新功能，但这个过程中遇到了两个主要问题。 1. **只刷新一次的问题**： 当上拉刷新执行后，`scroller`组件有时只会刷新一次，之后不再响应上拉操作。这是...
解决vux 中popup 组件Mask 遮罩在最上层的问题
01-18
最近使用vux的popup组件做个弹窗，在真机中使用发现存在滑动穿透的问题，即在弹出窗滑动内容，底层的内容也会跟着滑动，这种体验很不好。 废话不多说，直接上解决方法： 核心就是给根div添加固定定位。 具体实现如下...
uni-app的swiper组件切换且同时切换顶部菜单
DOM曼珠沙华的博客
09-08 4370
先截个图 上面是三个菜单，底下是进行切换的swiper，根据swiper的切换，底下的可见的绿色也会随之动态移动。 具体加自己不会截动图且涉及保密，其他部分当然不想再做一次，所以没图，直接看代码吧【狗头保命】 上面的代码实现，具体是在uni-app内实现的 我这里存在两个问题，我这三个swiper-item都是请求的后端接口，所以这边的三个item高度是不一致的。第二个是在接口请求时使用了onLoad不展示，最后查了一下感觉没用，使用了onShow时查后端接口。 这里需要注意的是swip.
Vux使用Swiper遇到的问题
qq_42262936的博客
01-20 505
需求 做一个沾满一屏的轮播，并且轮播里的文字数据都是自定义的，不完全是图片。 遇到的问题 在iPhone12上进行左右滑动的时候回出现卡顿，而在iphone8以及iphone13都试过没有问题。 排查过程 首先是怀疑前端资源太大导致的，就查看了打包后的资源，发现当时应用了特殊的字体，字体文件有8M，后来通过字蛛进行压缩（只对应用的文字进行提取）；首次打包上去测试后不卡顿了，但是多次测试又出现卡顿。 其次是怀疑是否是因为图片太大，数据太多导致的，本打算使用虚拟滚动来...
VUX的swiper组件的一个坑
weixin_44514323的博客
08-30 252
这个组件是内部没有深度的 watch监听， 他不能动态的加载数据， 比如你不能往数组push。但是你可以直接修改栈内存地址。就是一次性把值赋给list。 监听实现原理: 默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值： 深度监听实现原理： deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会
【uniapp】swiper 添加click事件
sayyy的专栏
08-12 5604
前言 Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替） 关于uniapp多端：用uniapp对多端的支持不一致，适配工作很繁琐 swiper的click事件在多端上，添加方法就不一样 swiper代码 <swiper class="swiper-box" @change="change" :current="current" :autoplay="true" > <swiper-item v-for="(item, index) i
Vue中swiper的指向性跳转~轮播图与标题的互动
一个天秤座的程序猿????
04-25 2940
vue中swiper的使用 在vue中加载swiper模块 //下载swiper： npm install swiper --save-dev html中的布局 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"&gt...
uniapp swiper组件添加点击事件
小白白的博客
04-07 4119
微信小程序下写法 <swiper circular duration="1000" interval="5000" autoplay> <swiper-item v-for="(item, index) in bannerlist" :key="index" @click="skip(item.url)"> <image class="loaded" :src="item.thumb"></image> </swiper-item> &lt
Swiper 点击事件 a链接失效
Jovan的博客
01-03 3679
最新写了一个新的响应式网站，里面用到了swiper 组件 1.初始化Swiper  var mySwiper = new Swiper('.swiper-container', { loop: true, // 循环模式选项 preventClicks: false, autoplay: { delay: 3000, stopOnLastSlide: false, disableO...
小程序-swiper-item点击事件
热门推荐
06-27 1万+
index.wxml <swiper class="banner" catchtap="onItemClick"> <block wx:for="{{dataList}}"> <swiper-item> <image src="{{item.img}}" class="slide-image" data-postId="{{item.id}}" />
vue中实现滚动和锚点跳转双向
qq_41656414的博客
06-02 889
vue中实现滚动和锚点跳转双向 直接上代码： <template> <div> <div class="list"> <ul> <li v-for="(item,index) in title_list" :key="index"> <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值