本文主要包含mui图文列表,mui图文表格,mui分享功能,mui搜索功能,mui内置地图导航功能等相关知识,教程希望在学习及工作中可以帮助到您
");
</div>
简介
在mui官方图文列表（缩略图居左）实例的基础上在每一列的右侧添加关注功能。[官方链接在这](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/media-list.html)
实现过程
刚开始实现的时候是将a链接和收藏按钮平级，二者为兄弟结点，同是li的子节点，给a链接一个固定宽度，收藏按钮靠右绝对固定。
然后问题就来了，每一次单击按钮的时候，mui默认给a链接添加‘mui-active’样式，非常容易造成体验上的困扰。
具体代码如下：
在mui官方图文列表（缩略图居左）实例的基础上在每一列的右侧添加关注功能。[官方链接在这](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/media-list.html)
实现过程
刚开始实现的时候是将a链接和收藏按钮平级，二者为兄弟结点，同是li的子节点，给a链接一个固定宽度，收藏按钮靠右绝对固定。
然后问题就来了，每一次单击按钮的时候，mui默认给a链接添加‘mui-active’样式，非常容易造成体验上的困扰。
具体代码如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <link href="../../css/mui.min.css" rel="stylesheet" />
- <style type="text/css">
- .span_occupation {
- position: absolute;
- font-size: 14px;
- padding: 0 5px;
- color: #FFFFFF;
- left: auto;
- margin-left: 10px;
- }
- .mui-content {
- overflow: auto;
- background: #F8F8F8;
- }
- /*清除伪元素样式，列对象分隔以间距表示*/
- .mui-table-view {
- background-color: inherit;
- }
- .mui-table-view .mui-table-view-cell {
- background-color: #fff;
- }
- .mui-table-view:before,
- .mui-table-view:after {
- height: 0;
- }
- .mui-table-view-cell {
- margin-bottom: 3px;
- }
- .mui-table-view-cell:last-child {
- margin-bottom: 0;
- }
- .mui-table-view-cell:after {
- height: 0;
- }
- .mui-table-view-cell>a:not(.mui-btn) {
- margin-left: -20px;
- padding: 5px 0 5px 15px;