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

什么是scroll-view？

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

scroll-view的基本属性

参考代码

代码笔记

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

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

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

样式代码：

图解微信小程序---scroll_view实现首页排行榜布局的更多相关文章

  1. 图解微信小程序---添加tabBar底部菜单，添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  2. 图解微信小程序---实现页面的跳转与返回操作

    图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...

  3. 图解微信小程序---获取电影信息

    图解微信小程序---获取电影信息 代码笔记 第一步:编写js文件,调用api获取相对应电影详情信息(注意带入的参数是id不在是榜单的type,电影api的movie后面又斜杠,别忘了,对应的绑定数据的 ...

  4. 图解微信小程序---获取电影列表

    图解微信小程序---获取电影列表 代码笔记 list跳转 第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console  Log的方式获取我们电影的相关数据字段,后 ...

  5. 图解微信小程序---调用API操作步骤

    图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基 ...

  6. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  7. 图解微信小程序---实现行的删除和增加操作

    图解微信小程序之实现行的删除和增加操作 代码笔记部分 第一步:在项目的app.json中创建一个新的页面(页面名称英文,可自定义) 第二步:在创建的新页面中编写页面(注意bindtap属性值,因为是我 ...

  8. 微信小程序不同机型的兼容布局解决

    因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...

  9. 如何用微信小程序模仿豆瓣首页

    程序思路: 用微信自带组件swiper来实现轮播图 用豆瓣提供的api(这里使用的电影api)来获取最近的电影数据[豆瓣api地址] 获取数据用微信的request方法,只需要提供豆瓣api的url链 ...

随机推荐

  1. 一次压测中tomcat生成session释放不及时导致的频繁fullgc性能优化案例

    性能问题:老年代一直处于占满状态,为什么没有发生内存溢出 以HotSpot VM的分代式GC为例,普通对象分配都是在young gen进行的,具体是从在位于young gen中的eden space中 ...

  2. webpack4 babel 篇

    demo 代码点此,如果对 babel 不熟,可以看一下babel 7 简单指北. webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的,可以通过配置,将 es6 ...

  3. win7 安装vb6

    1. 用setup.exe有问题,用acmsetup.exe 2.打开setupwiz.ini,把"acme=acmboot.exe"改为"=setup\acmsetup ...

  4. SQL注入：盲注

    盲注简介 所谓的盲注就是在服务器没有错误回显的时候完成的注入攻击. 服务器没有错误回显,对于攻击者来说缺少了非常重要的"调试信息". 盲注分类 1.布尔盲注 布尔很明显Ture和F ...

  5. 消息中间件Kafaka - PHP操作使用Kafka

    Centos版本:Centos6.4,PHP版本:PHP7. 在上一篇文章中使用IP为192.168.9.154的机器安装并开启了Kafka进行了简单测试,充当了Kafka服务器. 本篇文章新开启一台 ...

  6. Prometheus node_exporter grafana部署安装

    1.环境 centos7 prometheus-2.10.0.linux-amd64.tar.gz node_exporter-0.18.1.linux-amd64.tar.gz 2.安装 创建sys ...

  7. vsftpd服务

    vsftpd服务 文件传输协议(file transfer protocol,FTP),基于该协议FTP客户端与服务端可以实现共享文件,上传文件,下载文件.ftp基于TCP协议生成一个虚拟的连接,主要 ...

  8. Linux系统中的load average（平均负载/运行队列）

    1.load average 的含义 系统负载(System Load)是系统CPU繁忙程度的度量,即有多少进程在等待被CPU调度(进程等待队列的长度) linux系统中的Load对当前CPU工作量的 ...

  9. linux(03)基础系统优化

    Linux之基础系统优化 Linux基础系统优化 >>> https://www.cnblogs.com/pyyu/p/9355477.html Linux的网络功能相当强悍,一时之 ...

  10. 石欣钰-201871010117 《面向对象程序设计（java）》第六、七周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...