摘要：
如图所示：1.wxmlheader{item.name｝｝{{item.content}｝˃view˃页脚2 wxsspage｛100%；高度：100%；｝。包装机{display:flex；flex direction:column；100%；height:100%；}。标题｛background:rgb；color:#fff；行高：100rpx；flex:000100rpx；/*固定了100rpx，无需放大或缩小*/｝。主｛flex:1；位置：相对；｝主滚动｛位置：绝对；左：0；右：0；上：0；下：0；｝。主列表{display:flex；flex wrap：换行；对齐内容：空格；左边距：2vw；右边距：2ww；}。卡片｛47vw；页边距顶部：10rpx；页边边距底部：10rpx；｝。卡盒{100%；高度：200rpx；边框半径：6rpx；背景：#ccc；}。卡片内容｛color:blue；｝。页脚｛background:rgb；color:#fff；行高：100rpx；flex：00100rpx；/*固定了100rpx而不放大/缩小*/｝3.jsPage
如图：
1、wxml
<view class='wraper'> <view class='header'>header</view> <view class='main'> <scroll-view class='main-scroll' scroll-y style="height: 100%"> <view class='main-list'> <view class='card' wx:for="{{cardList}}"> <view class='card-box'></view> <view>{{item.name}}</view> <view class='card-content'>{{item.content}}</view> </view> </view> </scroll-view> </view> <view class='footer'>footer</view> </view>
2、wxss
page{ 100%; height:100%; } .wraper{ display: flex; flex-direction: column; 100%; height:100%; } .header{ background: rgb(8, 117, 94); color: #fff; line-height: 100rpx; flex: 0 0 100rpx; /* 不放大不缩小固定100rpx */ } .main{ flex: 1; position: relative; } .main-scroll{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .main-list{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: 2vw; margin-right: 2vw; } .card{ 47vw; margin-top: 10rpx; margin-bottom: 10rpx; } .card-box{ 100%; height: 200rpx; border-radius: 6rpx; background: #ccc; } .card-content{ color: blue; } .footer{ background: rgb(8, 117, 94); color: #fff; line-height: 100rpx; flex: 0 0 100rpx; /* 不放大不缩小固定100rpx */ }
3、js
Page({ /** * 页面的初始数据 */ data: { cardList: [ { name: 'aa', content: 'bb' }, { name: 'aa', content: 'bb' }, { name: 'aa', content: 'bb' }, { name: 'aa', content: 'bb' }, { name: 'aa', content: 'bb' }, { name: 'aa', content: 'bb' }, { name: 'aa', content: 'bb' }, { name: 'aa', content: 'bb' }, ] }, })