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

内容简述

上中下结构：头脚固定+中间滚动框
使用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="onSearch"><view slot="action" bind:tap="onClick">搜索</view></van-search></view></view></view><view class="m-middle"><scroll-view scroll-y class="m-scroll" refresher-enabled scroll-anchoring><van-cell-group class="m-noDivider"><van-cell wx:for="{{cellList}}" wx:key="index" wx:for-item="item" title="{{item.name}}" label="{{item.content}}" is-link bind:click="goDetail"></van-cell></van-cell-group></scroll-view></view><view class="m-footer"><view class="btn"><van-button block round type="primary" bind:click="goAdd" class="btnSingle">添加</van-button></view></view>
</view>

.less(仅部分)：

page {height: 100%;.m-flex {width: 100%;height: 100%;display: flex;flex-direction: column;//上部分.m-header {height: 100rpx;display: flex;flex-direction: column;justify-content: center;//搜索部分……}//中间滚动部分.m-middle {flex: 1; //占满height: 1px;.m-scroll {height: 100%;overflow-anchor: auto;}// 表单分隔栏……}//下部分.m-footer {margin: 10px;height: 130rpx;}}
}

所用数据：

cellList: [{     name: 'aa',content: 'bb'}, {name: 'aa1',content: 'bb1'}, {name: 'aa2',content: 'bb2'}, {name: 'aa3',content: 'bb3'}, {name: 'aa4',content: 'bb4'}, {name: 'aa5',content: 'bb6'}, {name: 'aa7',content: 'bb8'}, {name: 'aa9',content: 'bb10'},]

碎碎念

一只没有大志、只想摸鱼、脑子还不太好使的菜狗的日常记录，有错欢迎评论指出，其他勿扰(￣︶￣*))

其他相关参考：
1.Vant Weapp: https://vant-contrib.gitee.io/vant-weapp/#/home
2.微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

微信小程序页面布局——上中下结构相关推荐

移动端、微信小程序页面布局参考
转自:阮一峰的网络日志自己手写移动端页面的时候,可参考大佬的这两篇文章.看完之后对页面布局非常有帮助.文章如下: Flex 布局教程:语法篇网址:http://www.ruanyifeng.co ...
微信小程序页面元素居中布局
1. 小程序页面布局开发需求: 活动类型的小程序,要求:(1)页面全屏(2)页面中内容居中布局 2.小程序已知内容 (1)设计稿的尺寸为:750*1630 (2)设程序页面设置全屏模式的方法: &qu ...
ssm基于微信小程序的恋上诗词设计与实现毕业设计源码011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
ssm+mysql+基于微信小程序的恋上诗词设计与实现毕业设计-附源码011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
（附源码）ssm基于微信小程序的恋上诗词设计与实现毕业设计 011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
java+SpringBoot+HTML+Mysq基于微信小程序的掌上博物馆游览
详细功能设计:请点击下面链接查看 java+SpringBoot+HTML+Mysq基于微信小程序的掌上博物馆游览_哔哩哔哩_bilibili 源码+论文获取: 源码+论文获取请私信获取摘要本 ...

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

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

内容简述

实例

1.效果图

2.代码如下

碎碎念

微信小程序页面布局——上中下结构相关推荐

最新文章

热门文章