图解微信小程序---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. python如何通过windows命令行运行一个python程序文件？

    python如何通过windows命令行运行一个python程序文件? cmd 进入到py文件对应目录下或者直接在上面的文件地址栏输入cmd,敲入回车 定位到对应的目录下 输入python xxx.p ...

  2. android studio学习----gradle命令详解

    首先来给大家介绍一种简便并且个人最喜欢的一种办法.很多时候我们在GitHub上看到一个不错的开源项目,一般有两种需求,阅读源码和查看运行效果,如果是单纯的查看源码我更喜欢用一些轻量级编辑器,如vim, ...

  3. SQL中的视图(极客时间)

    视图 视图也就是虚拟表, 本身不具备数据, 是SQL中的一个变红要概念. 如图 视图可以帮助我们使用表的一部分, 而不是所有的表, 另一方面可以针对不同的用户制定不同的查询视图. 创建, 更新与删除视 ...

  4. 【微信小程序】开发实战 之 「视图层」WXML & WXSS 全解析

    在<微信小程序开发实战 之 「配置项」与「逻辑层」>中我们详细阐述了小程序开发的程序和页面各配置项与逻辑层的基础知识.下面我们继续解析小程序开发框架中的「视图层」部分.学习完这两篇文章的基 ...

  5. LAMP组合

    动,静资源: 静态资源:客户端从服务器获得的资源表现形式与原文件相同 动态资源:通常是程序文件,需要在服务器执行之后,将执行的结果返回给客户端. 我们还可以这样理解静态资源:服务器端接入到客户端的请求 ...

  6. 201871010123-吴丽丽 《面向对象程序设计（Java）》第八周学习总结

    201871010123-吴丽丽<面向对象程序设计(Java)>第八周学习总结 项目 内容   这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/  ...

  7. 【使用篇二】SpringBoot整合Listener（3）

    两种方式: 通过注解扫描完成 Listener 组件的注册 通过方法完成 Listener 组件注册 一.通过注解扫描完成 Listener 组件的注册 1. 编写Listener类 /*** spr ...

  8. VIJOS-P1045 Kerry 的电缆网络

    JDOJ 1229: VIJOS-P1045 Kerry 的电缆网络 https://neooj.com/oldoj/problem.php?id=1229 Description         K ...

  9. openlayers上添加点击事件

    有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...

  10. requests--重定向，序列化

    重定向 默认情况下,除了 HEAD, Requests 会自动处理所有重定向.可以使用响应对象的 history 方法来追踪重定向. Response.history 是一个 Response 对象的 ...