图片轮播+点击跳转不同页面（给初学者）

在qq群内有个群友问点击不同轮播图片跳转到不同页面的这个功能怎么写？

首先微信官方给出一个轮播图的事例地址

wxml：

   <swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{background}}" wx:key="*this"><swiper-item><view class="swiper-item {{item}}"></view></swiper-item></block></swiper>

js：

Page({data: {background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],indicatorDots: true,vertical: false,autoplay: false,interval: 2000,duration: 500},
})

完成点击图片跳转功能，也就是说在这个基础上添加一个点击事件，并且要有一个对一个图片的路径。原先的代码是直接显示轮播图片的，现在是用背景了。那么先把代码改成显示图片

wxml：

 <swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgArr}}" wx:key="*this"><swiper-item><images url="{{item}}"></swiper-item></block></swiper>

js:

Page({data: {imgArr: [
'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'],indicatorDots: true,vertical: false,autoplay: false,interval: 2000,duration: 500},
})

图片轮播做完了，那么该添加点击事件了，在images上添加一个 bindtap=“OnJump” 事件，有事件了，还需要跳转的路径，那么应该在图片数组内进行绑定了，一个图片对应一个路径。然后通过点击一个图片来获取相对一个的跳转地址。

思路说完了，我直接上代码了

wxml：

 <swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgArr}}" wx:key="*this"><swiper-item>
<!-- data-url 为imgArr中图片对应的url地址 --><images url="{{item.images}}" bindtap="OnJump" data-url="item.url"></swiper-item></block></swiper>

js:

Page({data: {imgArr: [
{                  images:'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
url:'/paegs/index1/index1'
},
{                  images:'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
url:'/paegs/index1/index1'
},
{                  images:'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
url:'/paegs/index1/index1'
},],indicatorDots: true,vertical: false,autoplay: false,interval: 2000,duration: 500},OnJump:function(e){ //点击图片触发的事件console.log(e)    // 查看标签上的属性var url = e.currentTarget.dataset.url // 取出标签上绑定的 urlwx.navigateTo({ // 不关闭当前页面，跳转到非tarber页面url: url,})}
})

关于跳转方式推荐这篇文章小程序跳转

图片轮播+点击跳转不同页面（给初学者）相关推荐

android图片轮播+点击跳转广告页面
Android轮播网络图片+点击跳转广告页面--------–一些新手总是很头疼怎么获取网络图片的url之后让它像一些广告那样轮播起来,点击图片之后跳转到指定网页.效果如下在布局引用自定义控件 &l ...
图片轮播点击轮播（二）
自定义点击左右滚动 HTML部分 <div id="img-slider"><button id="prev"><img src= ...
自定义控件：图片轮播，点击图片进入webview
自定义控件:图片轮播,点击图片进入webview 版权声明:本文为博主原创文章,未经博主允许不得转载. 很方便的先自定义控件,可以直接使用,添加属性和实现功能: import java.util.Ar ...
html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
html+css+js实现的图片轮播图下方配文字可变图片可点击
js代码 <script>// 首先获取相关DOMvar box =document.getElementById('box');var img =document.getElementB ...
js实现图片轮播（终结版）
解决了一些bug,干脆就在这里面也对闭包总结了下下. <!DOCTYPE html> <html lang="en"> <head> <m ...
AdPlayBanner：功能丰富、一键式使用的图片轮播插件
概述 AdPlayBanner:功能丰富.一键式使用的图片轮播插件详细代码下载:http://www.demodashi.com/demo/11312.html AdPlayBanner是一个An ...
html对图片轮播脚本怎么调用,【jquery前端开发】可调整的幻灯片(图片轮播)
第一次写博客,希望接下来写的东西或多或少能帮到些人,虽然这些东西都是一些大神前辈们写了无数遍的东西,但我尽量以一名小白的视角把代码写得清楚点,好心人的就给点赞吧. 1.前期准备这是我们编写代码前必 ...
axure 图片切换图片的交互_Axure教程：首页图片轮播
图片轮播是各大网站常常见到的形式,文章带我们学习了如何用Axure实现图片轮播功能,一起来看看~ 双11刚过没多久,大家是否都参加了2000+亿的大项目呀?剁手的时候,有没有被各大电商平台的首页图片轮 ...

图片轮播+点击跳转不同页面（给初学者）

图片轮播+点击跳转不同页面（给初学者）相关推荐

最新文章

热门文章