在这里我使用vant的插件是Grid宫格
我的:
编译器:vscode
这里给出vant的官网:https://vant-contrib.gitee.io/vant/#/zh-CN/home
在vant的Grid宫格中我用的是[格子间距]
官方代码如下:
<van-grid :gutter="10">
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>
官网的效果图示是这样的:
然后我想要它一共是三行,所以对代码进行了修改:
<van-grid :gutter="10"
<van-grid-item v-for="value in 12" :key="value" icon="photo-o" text="文字" />
</van-grid>
gutter是设置格子的间距,我没有修改,用的默认的10
原来的v-for=“value in 8”,我改为了v-for=“value in 12”,也就是说,一行四个,三行就是12个
然后我的界面是这样的:
可以看出下面那一部分是溢出的。
那么,怎么修改让它可以装进去而且多出来的界面可以进行滑动来显示呢?
非常简单,只需要改两个地方:
- 装这个格子的div的高度
我在把这段代码插入的时候,给它包裹了一个div,这样修改div的高度就可以限制它,让它显示出来的地方刚好是这个底部栏的上面,具体多大可以自己调着试一下。
这里贴一下我调出来的界面:
当然,如果你还想让它的高度再小一点也可以,但距离底部就会有边距,如果你没有设置背景颜色就都是白色,可能看不太出来,但如果有背景颜色,就会比较明显,像这样:
我不知道有没有那种可以随着界面的大小改变而改变的那种属性,如果有谁知道可以告诉一下我呀,毕竟这是手机端界面,如果手机型号不同,肯定页面大小不同,这样只是把大小写死了,没办法自适应。
然后做完这一步只限制它还没用,下面还是出来的,然后就来做第二步。
2. 装整个界面的div里的overflow属性
比如我的界面设计是:
那么我就在container的css样式中添加overflow属性:
<style>
.container{
background-color:floralwhite;/*这是我加的背景颜色*/
overflow: auto;
}
</style>
效果就是这样的:
滑下去长这样:
可以看到右边还有一小道线,那个是叫滚动条…吧,可以随着你的滑动上下移动,然后几秒钟就会消失。
好滴,今天就说这么多~