图解微信小程序---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. css中的baseline

    这是css中的一个容易被人忽略的概念,今天在知乎上看到一个问题,这个问题应该是关于baseline,才去补习了一下关于baseline的知识,首先我来还原一下问题: <div style=&qu ...

  2. 「白帽黑客成长记」Windows提权基本原理（上）

    我们通常认为配置得当的Windows是安全的,事实真的是这样吗?今天让我们跟随本文作者一起深入了解Windows操作系统的黑暗角落,看看是否能得到SYSTEM权限. 作者将使用不同版本的Windows ...

  3. maven 学习---用Eclipse创建一个Maven Web项目

    下面是使用 Eclipse 来创建一个Maven Web项目的说明.这是相当简单的. 现在让我们开始吧! 1: 启动 Eclipse, 点击 File->New->Other 2: 在弹出 ...

  4. linux时间校对

    在虚拟机中查看安装的linux时间,总是不对,于是查阅资料,有很多解决办法,我个人比较倾向于用ntpdate的方式更新时间. 感觉比较好用的一个方法: 输入date查看时间,发现不对,相差甚远!(当前 ...

  5. hashlib以及hmac的日常应用

    首先我们要明白日常的Web网页为了保证数据的安全都会对数据的存储进行一些加密,当我需要在此网站验证时就需要对原有的密码以及账号进行加密此时我们就需要用到hashlib这个框架的一些功能,下面我就来更大 ...

  6. 【LeetCode】寻找两个有序数组的中位数

    给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 nums2  ...

  7. Python从零开始——列表List

    一:Python列表知识总览 二:列表操作符 三:Python内置函数操作列表 四:Python列表封装函数

  8. 7、Topic

    Topics In the previous tutorial we improved our logging system. Instead of using a fanout exchange o ...

  9. 华为云fusionsphere 6.1组件功能

      [fsp@controller-21 ~]$ openstack --version ##fusionsphere 6.1基于openstack 2.2.1 [fsp@controller-21 ...

  10. Codeforces 1278F: Cards

    题目传送门:CF1278F. 题意简述: 有 \(n\) 个独立随机变量 \(x_i\),每个随机变量都有 \(p = 1/m\) 的概率取 \(1\),有 \((1-p)\) 的概率取 \(0\). ...