vue内容很多时保证只有一定的高度,点击查看更多再展开所有的
上面是文章的内容,下面有个评论和点赞。要保证无论文章多长,下面的评论和点赞位置一直要在下面,其中一直方式是利用底部菜单的形式: 提交订单但是如果不想用这种呢?还有一种就是通过一个查看更多的按钮,点击了才会展开显示所有的内容,不然显示一个页面的。 标题 时间
上面是文章的内容,下面有个评论和点赞。要保证无论文章多长,下面的评论和点赞位置一直要在下面,其中一直方式是利用底部菜单的形式:<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//刚开始没有激活
}}
更多推荐
所有评论(0)