wxml
<view class=’wraper’>
<viewclass=’header’>固定头部</view>
<viewclass=’main’>
<scroll-viewclass=’main-scroll’scroll-ystyle=”height: 100%”>
<viewclass=’main-list’>
<viewclass=’card’wx:for=”{{cardList}}”>
<viewclass=’card-box’></view>
<view>{{item.name}}</view>
<viewclass=’card-content’>{{item.content}}</view>
</view>
</view>
</scroll-view>
</view>
<viewclass=’footer’>固定底部</view>
</view>
wxss
page {
width:100%;
height:100%;
}
.wraper {
display:flex;
flex-direction:column;
width:100%;
height:100%;
}
.header {
background:rgb(8, 117, 94);
color:#fff;
line-height:100rpx;
display:flex;
justify-content:center;
}
.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 {
width:47vw;
margin-top:10rpx;
margin-bottom:10rpx;
}
.card-box {
width:100%;
height:200rpx;
border-radius:6rpx;
background:#ccc;
}
.card-content {
color:blue;
}
.footer {
background:rgb(8, 117, 94);
color:#fff;
line-height:100rpx;
display:flex;
justify-content:center;
}
js
Page({
data: {
cardList: [
{
name: ‘dandroid.cn’,
content: ‘www.dandroid.cn’
}, {
name: ‘dandroid.cn’,
content: ‘小程序源码网站’
}, {
name: ‘dandroid.cn’,
content: ‘小程序源码网站’
}, {
name: ‘dandroid.cn’,
content: ‘小程序源码网站’
}, {
name: ‘dandroid.cn’,
content: ‘小程序源码网站’
}, {
name: ‘dandroid.cn’,
content: ‘小程序源码网站’
}, {
name: ‘dandroid.cn’,
content: ‘小程序源码网站’
}, {
name: ‘dandroid.cn’,
content: ‘小程序源码网站’
}
]
},
})
阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=6389，转载请注明出处。
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=6389，转载请注明出处。
评论0