图解微信小程序---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. JPA笔记1 ManyToOne

    persistence.xml <?xml version="1.0" encoding="UTF-8"?> <persistence ver ...

  2. Linux环境oracle导库步骤

    1.xshell登录linux 2.切换oracle用户 su - oracle 3.创建directory仓库目录,存放数据库dmp文件 //DIRFILE_zy 表示目录名称 后面的是实际地址 c ...

  3. leetcode - 链表两两元素交换 + 判断链表有无环

    链表两两元素交换 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, 你 ...

  4. RequestsDependencyWarning: urllib3 (1.25.7) or chardet (2.2.1) doesn't match a supported version

    /usr/lib/python2.7/site-packages/requests/__init__.py:91: RequestsDependencyWarning: urllib3 (1.25.7 ...

  5. python简单日志处理

    简单日志处理 import datetime import re logfile='''58.61.164.141 - - [22/Feb/2010:09:51:46 +0800] "GET ...

  6. 非main goroutine的退出及调度循环(15)

    本文是<Go语言调度器源代码情景分析>系列的第15篇,也是第二章的第5小节. 上一节我们说过main goroutine退出时会直接执行exit系统调用退出整个进程,而非main goro ...

  7. xargs原理及用法详解

    为什么需要xargs 管道实现的是将前面的stdout作为后面的stdin,但是有些命令不接受管道的传递方式,最常见的就是ls命令.有些时候命令希望管道传递的是参数,但是直接用管道有时无法传递到命令的 ...

  8. C++创建或者打开文本,记录运行日志

    代码 std::fstream f; f.open("D:/debugTime.txt", std::ios::app); f << "time of XXX ...

  9. 编译安装PHP以及需要的基本扩展库(php7.4)

    安装配置选项1: ./configure --prefix=/usr/local/php --with-mysql=/usr/local/mysql --with-curl --with-freety ...

  10. KDE 上 任务栏 图标位置更改

    任务栏上图标是不能直接拖拽的. 右键点任务栏,选[Panel Options -> Panel Settins]之后,就可以拖拽了. 完成之后,按X就行了.