有点类似新闻列表和新闻详情页，我做的是视频列表和视频详情页
在视频列表页面：
<body>
<div id="mui-content" class="mui-content">
</div>
<script id="list" type="text/html">
{{each videos as value i}}
<div class="mui-card" >
<div class="mui-card-content" >
<img src="{{value.vpic}}"/>
</div>
<div class="mui-card-content-inner">
<p><span>{{value.name}}</span>发表于 <span>{{value.time}}</span></p>
<p>{{value.title}}</p>
</div>
</div>
{{/each}}
</script>
<script>
//测试数据
var data = {
"videos":[
{"vid":"01","vpic":"../img/v1.jpg","name":"Champion","time":"2017-04-04","title":"大话西游经典！"},
{"vid":"02","vpic":"../img/v2.jpg","name":"Sam","time":"2017-04-01","title":"第一次配音~"}
]};
var html = template('list', data);
document.getElementById('mui-content').innerHTML = html;
</script>
</body>每个列表项都有监听tap
mui('.mui-content').on('tap','.mui-card',function(){
//进入视频播放页面
mui.openWindow({
url:'videoplay.html',
// extras : { }
})
});
现在就是不太清楚怎么把列表的vid传过去，在循环输出的时候应该放在哪里，在监听的时候可以被获取到？
1 个回复
ppyan (作者)
查到这个 data-* 属性来嵌入自定义数据
改了下，可以了
<div class="mui-card" id="v{{value.vid}}" data-vid="{{value.vid}}" >