图解微信小程序---scroll_view实现首页排行榜布局

图解微信小程序---scroll_view实现首页排行榜布局

什么是scroll-view?

滚动视图
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

scroll-view的基本属性

图解微信小程序---scroll_view实现首页排行榜布局

参考代码

 图解微信小程序---scroll_view实现首页排行榜布局

代码笔记

第一步:在首页中增加scrool-view视图容器用于显示我们的电影榜

图解微信小程序---scroll_view实现首页排行榜布局

第二步:编写对应的js文件,显示我们的基本列表数据

图解微信小程序---scroll_view实现首页排行榜布局

第三步:编写我们的样式控制,达到特定效果
效果图:

图解微信小程序---scroll_view实现首页排行榜布局

样式代码:

图解微信小程序---scroll_view实现首页排行榜布局

 图解微信小程序---scroll_view实现首页排行榜布局

图解微信小程序---scroll_view实现首页排行榜布局

上一篇:小程序登录的AES加密解释


下一篇:小程序全局生命周期( 仅供了解 )