大哥哥
大哥哥
  • 发布:2018-11-07 18:43
  • 更新:2018-11-09 15:46
  • 阅读:1729

仿一个单选 样式效果

分类:MUI

如图,
有两个思路不会.
一个是如何模拟这个样式,如果不用radio标签,比如用li标签仿照这样样式, 如何定义选中后的样式.
二一个就是如何用js监听选中项事件.

目前项目是用vue在开发,不知vue有何方便的方法不

2018-11-07 18:43 负责人:无 分享
已邀请:
s***@163.com

s***@163.com - sddw81

这个是PC端用的,我写过

  • 大哥哥 (作者)

    是呀.pc端的好写,这个app端的就不知道怎么写了. 我做后端开发的.前端不熟悉

    2018-11-08 10:24

大哥哥

大哥哥 (作者)

 <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,不知道怎么去掉

W小姐

W小姐

用v-bind:class="{ active: isActive },你去看一下vue的教程,希望不要随口就问,教程里有写

  • 大哥哥 (作者)

    感谢回复! 这个只是动态绑定一个class. 我这个在同一个列表中, 有多个a标签的样式需要控制.

    2018-11-08 12:17

  • W小姐

    回复 大哥哥:样式当然是写在对应的class上啊

    2018-11-08 12:21

回梦無痕

回梦無痕 - 暂停服务

都是基础问题吧。
如何用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");  
            })
  • 回梦無痕

    用vue在开发,却用了dom的操作去实现。

    2018-11-08 16:08

大哥哥

大哥哥 (作者)

<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();  
            })

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