上面是文章的内容，下面有个评论和点赞。要保证无论文章多长，下面的评论和点赞位置一直要在下面，其中一直方式是利用底部菜单的形式：<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item">提交订单</a> </nav>
但是如果不想用这种呢？
还有一种就是通过一个查看更多的按钮，点击了才会展开显示所有的内容，不然显示一个页面的。
<!--文章-->
<div :class="{showall:true,active:showall}"> <h1 class="title" >标题</h1> <p class="tool">时间</p> <div v-html="list.content" class="article"></div></div>
<div class="mui-text-center imgbtn" :class="{active:showall}" @tap="showall=!showall"><img src='img/showall.png' /><h6>查看所有</h6></div> <div class="mui-clearfix"> <span class="replay mui-pull-left" >111条评论</span> <span class="mui-pull-right" >1条赞</span> </div>
重点看标记颜色的代码。
css也是很重要的
/*收缩框*/ .showall { padding: 10px; height: 300px; overflow: hidden; clear: both; background: #f5f5f5; margin-top: 6px } .showall.active { //点击了查看更多，就高度就不管了。随实际的大小变化 height: auto; background: #fff; min-height: 150px; } .imgbtn { border-top: 1px solid #ccc; margin-top: 6px; margin-bottom: 10px }
js的内容，这里就只显示主要的啦
data(){ return{ showall：false//刚开始没有激活
}}
