April小小
April小小
  • 发布:2016-07-18 16:01
  • 更新:2016-07-18 16:17
  • 阅读:1361

从后台读取的动态的页面,如何触发tap链接?

分类:MUI

我整个列表都是用ajax动态生成的,有上拉下拉刷新,想加tap链接到detail页面,但是tap一直触发不了。。。能否给个demo?
谢各位大神!!!

2016-07-18 16:01 负责人:无 分享
已邀请:
赵梦欢

赵梦欢 - 专注前端,乐于分享!

首先在进行数据渲染的时候可以给列表加一个属性,如href,id等,这里我加一个data-id属性:

for (var i = cells.length, len = i + 20; i < len; i++) {  
	var li = document.createElement('li');  
	li.setAttribute('data-id',i);  
	li.className = 'mui-table-view-cell';  
	li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
	table.appendChild(li);  
}

然后就是监听事件,mui提供了批量事件绑定的方法:

mui('.mui-table-view').on('tap','li',function(){  
	console.log(this.getAttribute('data-id'))  
})

然后如果需要打开页面传递参数,直接openWindow的拓展参数传递参数就可以:

mui('.mui-table-view').on('tap','li',function(){  
	var id = this.getAttribute('data-id');  
	//打开详情页面  
    mui.openWindow({  
        url:'detail.html',  
        id:'detail.html',  
        extras:{  
            id:id  
        }  
    });  
})

详细看看这篇文章:mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解

  • April小小 (作者)

    哈哈哈哈哈哈哈哈~~非常感谢非常棒!!已经搞定啦~~~3QQQQQQQQQQQ~~


    2016-07-18 16:40

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