codecamp

通讯录样式排列

当然这不仅局限于通讯录的样式,好友类、消息类、附近的人都可以用这个来实现,右侧也可以加上箭头。想要更丰富一点那就自己动手再自定义一下

使用效果跟.aui-list-view是一样的,无非在这我们使用.aui-user-view来完成

<div class="aui-content">
    <ul class="aui-user-view">
        <li class="aui-user-view-cell aui-img">
            <img class="aui-img-object aui-pull-left" src="https://atts.w3cschool.cn/attachments/image/cimg/demo4.png">
            <div class="aui-img-body">
                <span>流浪男<em>11.1KM</em></span>
                <p class='aui-ellipsis-1'>北京轻元素网络科技</p>
            </div>
        </li>
    </ul>
</div>
图片列表布局样式
九宫格+十六宫格
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }