BruceAn
BruceAn
  • 发布:2015-07-09 21:53
  • 更新:2015-08-02 21:50
  • 阅读:3136

slider组件如何实现图片点击事件

分类:MUI

使用下面的代码定义了一个slider来滚动播放图片列表,但是如何响应单个图片的tap事件并跳转到新的页面去呢?

<div id="slider" class="mui-slider">  
		<div class="mui-slider-group mui-slider-loop">  
			<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4.jpg"></a></div>  
  
			<div class="mui-slider-item"><a href="#"><img src="img/1.jpg"></a></div>	  
			<div class="mui-slider-item"><a href="#"><img src="img/2.jpg"></a></div>  
			<div class="mui-slider-item"><a href="#"><img src="img/3.jpg"></a></div>  
			<div class="mui-slider-item"><a href="#"><img src="img/4.jpg"></a></div>  
  
			<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/1.jpg"></a></div>  
		</div>  
  
		<div class="mui-slider-indicator mui-text-right">  
			<div class="mui-indicator mui-active"></div>  
			<div class="mui-indicator"></div>  
			<div class="mui-indicator"></div>  
			<div class="mui-indicator"></div>  
		</div>  
	</div>
2015-07-09 21:53 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

mui('#slider').on('tap','a',function(){  
console.log(this.href);  
});
  • BruceAn (作者)

    问题已解决,非常感谢!


    2015-08-03 09:31

BruceAn

BruceAn (作者)

使用下面的代码定义tap事件后,不起作用,Why:

	var sliders = document.querySelectorAll(".mui-slider-item>a>img");  
	for (var i = 0; i < sliders.length; i++)  
	{  
		sliders[i].addEventListener('tap',function(e)  
		{  
			console.debug(this.getAttribute('src')));  
		});  
	}
DCloud_UNI_CHB

DCloud_UNI_CHB

你有没有看你的Hbuilder控制台错误信息?

console.debug(this.getAttribute('src')));

最后多了个括号。

BruceAn

BruceAn (作者)

Sorry,贴代码时多了一个括号。
实际运行时运行不到console输出这行代码,也就是tap事件定义无效。

是不是tap事件定义的元素不对?应该如何定义?

BruceAn

BruceAn (作者)

期待传说中的高手的出现!

BruceAn

BruceAn (作者)

自己再顶一下!

Slider组件如果不能响应点击事件,那还算个啥图片轮播组件啊,只能看不能点?

该问题目前已经被锁定, 无法添加新回复