微信小程序页面布局——上中下结构

最新推荐文章于 2024-03-13 17:22:13 发布

立志当咸鱼

最新推荐文章于 2024-03-13 17:22:13 发布

阅读量4k

点赞数 1

分类专栏：微信小程序文章标签：小程序前端 less

本文链接：https://blog.csdn.net/weixin_44886300/article/details/119608014

版权

本文介绍了如何在微信小程序中创建上中下结构的页面布局，使用Vant Weapp UI框架和less进行样式编写。通过将页面分为上、中、下三个view，并利用flex布局，设置头部和底部固定高度，中间区域使用scroll-view实现滚动效果。详细代码和实际效果展示帮助理解实现过程。

摘要由CSDN通过智能技术生成

小程序页面布局——上中下结构

内容简述

上中下结构：头脚固定+中间滚动框
使用UI框架：Vant Weapp(引入安装参考)
为了方便，使用了less生成wxss，所以展示的是less代码，有需要可以看：https://www.jianshu.com/p/998d77d46c00

思路：先用view把页面分成上中下三部分，整个页面用flex布局，头部和脚部位置固定高度，滚动区域使用 <scroll-view></scroll-view> 标签，中间区域设置为flex:1。

实例

1.效果图

在这里插入图片描述

2.代码如下

.wxml：

<view class="m-window m-flex">
    <view class="m-header">
        <view class="header-search">
            <view class="header-inp">
                <van-search shape="round" placeholder="请输入搜索关键词" use-action-slot bind:search=<

最低0.47元/天解锁文章

立志当咸鱼

关注

1
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
微信小程序页面布局——上中下结构

小程序页面布局——上中下结构内容简述上中下结构：头脚固定+中间滚动框使用UI框架：Vant Weapp(引入安装参考)为了方便，使用了less生成wxss，所以展示的是less代码，有需要可以看：https://www.jianshu.com/p/998d77d46c00思路：先用view把页面分成上中下三部分，整个页面用flex布局，头部和脚部位置固定高度，滚动区域使用 <scroll-view></scroll-view> 标签，中间区域设置为flex:1。实例
复制链接

扫一扫