图解微信小程序---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. 【已采纳】新项目第一次怎么上传到github里面

      言归正传,最近学习了怎么将新创建的本地代码上传到github上,这里简单的记录一下,我喜欢使用命令行,这里全用命令行来实现,不了解git命令的可以去了解下. 第一步:建立git仓库 cd到你的本地 ...

  2. CentOS用yum安装MySQL 8.0 .

    先说一句,fuck,搞了一下午. 步骤:一:安装yum源: 1.wget https://dev.mysql.com/get/mysql80-community-release-el6-3.noarc ...

  3. 【Java】理解ClassNotFoundException与NoClassDefFoundError的区别

    一.概念上的认识 1)Exception与Error的区别 1.Exception的出现不会导致程序结束,用户程序可以捕获该异常 2.Error的出现会导致程序结束,用户程序无法捕获Error错误 2 ...

  4. Linux命令——ethtool

    转自:https://www.cnblogs.com/kelamoyujuzhen/p/10116423.html 参考:9 Linux ethtool Examples to Manipulate ...

  5. django-manage.py参数

    cleanup--从数据库中删除旧数据 compilemessages--将.po文件编译为.mo以与gettext一起使用 createcachetable--为SQL缓存后端创建表 create ...

  6. Java同步和异步，阻塞和非阻塞

    同步和异步.阻塞和非阻塞 同步和异步关注的是消息通信机制. 同步是指: 发送方发出数据后, 等待接收方发回响应后才发下一个数据包的通讯方式. 就是在发出一个调用时, 在没有得到结果之前, 该调用就不返 ...

  7. JS高阶---进程与线程

    [大纲] 二级大纲: 三级大纲: [主体] (1)进程process 如下所示,两者内存空间相互独立 (2)线程thread (3)图解 注意:有的程序是多进程的,有的时单进程的 (4)单线程与多线程 ...

  8. SQLAlchemy(1)

    介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数据API执行SQL并获取 ...

  9. 防止ARP欺骗

    前言: 曾经因为宿舍里面的同学经常熬夜打游戏,好言相劝不管用,无奈之下使用arp欺骗他们的主机,使之晚上11点之后游戏延迟,掉线,最后,一到11点同学们就都上床睡觉了. 防止arp欺骗的三种思路: 在 ...

  10. shell 之while两种写法

    1.while[] #!/bin/dash min= max= while [ $min -le $max ] do echo $min min=`` done 2. while(()) #!/bin ...