如图,
有两个思路不会.
一个是如何模拟这个样式,如果不用radio标签,比如用li标签仿照这样样式, 如何定义选中后的样式.
二一个就是如何用js监听选中项事件.
目前项目是用vue在开发,不知vue有何方便的方法不
大哥哥 (作者)
<div class="list-tag">
<a >少女</a> <a> 热血</a> <a >冒险</a>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui(".list-tag").on("tap","a",function(e){
console.log(this.innerHTML)
this.classList.add("active");
})
</script>
我用这个代码实现了选择加色. 可已选择的active,不知道怎么去掉
回梦無痕 - 暂停服务
都是基础问题吧。
如何用js监听选中项事件.
<view @tap="tapevent"></view>
如何定义选中后的样式
这个方法多种多样。
一般像你这样的多个选择的,都是:class的方法,向楼上那样。
渲染列表数组为
[{text:'电影',isActive:true},{text:'游戏',isActive:false},{text:'动漫',isActive:false}]
然后列表view:class="{ active: isActive },
就可以监听view的tap事件动态给对应的数组的isActive 改为true或者false就行了。
这样可以方便的从对象中一次性获取所有列表的选中状态。
大哥哥 (作者)
感谢各位. 我用自己的方法解决了.
<div class="list-tag">
<a id='tag1'>少女</a> <a id='tag2'> 热血</a> <a id='tag3' >冒险</a>
</div>
var list_activeId;
mui(".list-tag").on("tap","a",function(e){
console.log(this.innerHTML)
console.log(list_activeId)
if(list_activeId){
document.getElementById(list_activeId).classList.remove("active");
}
console.log(this.getAttribute('id'))
list_activeId=this.getAttribute('id');
//list_tag.isActive=true;
this.classList.add("active");
})
大哥哥 (作者)
<div class="list-tag gray-medium">
类型:<a id='tag1'>少女</a> <a id='tag2'> 热血</a> <a id='tag3' >冒险</a>
</div>
mui(".list-tag").on("tap","a",function(e){
var list_activeId;
listcomic.tag=this.innerHTML;
console.log(this.innerHTML)
if(list_activeId){
document.getElementById(list_activeId).classList.remove("active");
}
list_activeId=this.getAttribute('id');
this.classList.add("active");
getRemotedata();
})
大哥哥 (作者)
是呀.pc端的好写,这个app端的就不知道怎么写了. 我做后端开发的.前端不熟悉
2018-11-08 10:24