1.项目结构

2.页面

(1)数据(逻辑)

board.js

// pages/board/board.js
Page({ /**
* 页面的初始数据
*/
data: {
imgWrap: []
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const _this = this;
// 请求数据
wx.request({
url: 'https://api.douban.com/v2/movie/coming_soon',
data: {},
header: {
'content-type': 'json' // 默认值
},
success: function(res){
const data = res.data.subjects.slice(0,5);
_this.setData({
imgWrap: data
})
}
})
}
})

(2)布局

board.wxml

<!--pages/board/board.wxml-->
<view>
<!-- 轮播图 -->
<view class='slide'>
<swiper indicator-dots='true' autoplay='true' interval='8000' duration='1000'>
<block wx:for="{{imgWrap}}" wx:key="id">
<swiper-item>
<image src='{{item.images.large}}' class='slide-image' width="355" height="150" mode='aspectFill'/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 标题 -->
<view class='title-wrap'>
<text class='title'>豆瓣电影榜单集合</text>
<text class='desc'>最新,最IN的影视信息收集~</text>
</view>
<!-- 榜单部分 -->
<view class='board'>
<!-- 正在热映 -->
<navigator url='../list/list?type=in_theaters&title=正在热映' hover-class='none'>
<view class='board-item'>
<text>正在热映</text>
<image src='../../images/arrowright.png' mode='aspectFill'></image>
</view>
</navigator>
<!-- 即将热映 -->
<navigator url='../list/list?type=coming_soon&title=即将上映' hover-class='none'>
<view class='board-item'>
<text>即将上映</text>
<image src='../../images/arrowright.png' mode='aspectFill'></image>
</view>
</navigator>
<!-- TOP250 -->
<navigator url='../list/list?type=top250&title=TOP250' hover-class='none'>
<view class='board-item'>
<text>TOP250</text>
<image src='../../images/arrowright.png' mode='aspectFill'></image>
</view>
</navigator>
<!-- 北美票房榜 -->
<navigator url='../list/list?type=us_box&title=北美票房榜' hover-class='none'>
<view class='board-item'>
<text>北美票房榜</text>
<image src='../../images/arrowright.png' mode='aspectFill'></image>
</view>
</navigator>
</view>
</view>

(3)样式

board.wxss

/* pages/board/board.wxss */
.slide swiper {
height: 400rpx;
}
.slide-image {
width: 100%;
height: 100%;
}
.title-wrap {
margin-top: 30rpx;
padding-left: 70rpx;
}
.title-wrap .title{
display: block;
font-size: 50rpx;
}
.title-wrap .desc {
margin-top: 20rpx;
display: block;
font-size: 30rpx;
color: #808080;
}
.board {
display: flex;
flex-direction: column;
padding: 30rpx;
}
.board .board-item {
flex: 1;
border: 1rpx solid #eee;
margin-top: 20rpx;
padding: 30rpx;
display: flex;
background-color: #fff8dc;
/*移动端展示:元素点击时高亮*/
cursor: pointer;
}
.board text {
flex: 1;
font-size: 30rpx;
}
.board image {
width: 40rpx;
height: 40rpx;
}

3.效果图

微信小程序 项目实战(二)board 首页的更多相关文章

  1. 微信小程序项目实战之天气预报

    概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...

  2. 微信小程序项目实战之豆瓣天气

    概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...

  3. 微信小程序项目实战 - 菜谱大全

    1. 项目简介 最近研究小程序云开发,上线了一个有关菜品查询的小程序.包括搜索.分享转发.收藏.查看历史记录等功能.菜谱 API 来自聚合数据.云开发为开发者提供完整的云端支持,弱化后端和运维概念,无 ...

  4. 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页

    步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...

  5. 微信小程序 项目实战(三)list 列表页 及 item 详情页

    1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载 ...

  6. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  7. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

随机推荐

  1. 格式化输出,基本运算符,流程控制主if

    5.5自我总结 一.格式化输出 1.占位符 a = 1 b = 2 print('%S %s'%(a,b)) #1 2 print('%s %s'%(1,2)) #1 2 2.format格式化 a ...

  2. Day11名称空间,作用域,闭包函数

    Day11 1.函数对象: ①可以被引用 ​ ②可以作为另一个函数的参数 ​ ③可以作为另一个函数的返回值0 ​ ④可以被存储到容器类型中 2.函数嵌套: ①嵌套调用:在一个函数中调用了另一个函数 ​ ...

  3. python中的list、tuple和dictionary

    列表 列表是python中最基本的数据结构之一,并且列表的数据项不需要具有相同的数据类型,创建一个列表,只需把逗号分隔的不同数据项使用方括号括起来即可.具体的定义式如下: list=['变量1','变 ...

  4. LeetCode695--岛屿的最大面积

    ''' 岛屿的最大面积 给定一个包含了一些 0 和 1的非空二维数组 grid , 一个 岛屿 是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合.你可以假设二维矩阵的四个边缘都被水包围着 ...

  5. C#中何时使用dynamic

    背景:比如说,有一个方法,有很多参数,且有时候只需要其中的某几个参数,有时候需要使用全部,甚至有时候一个都不需要,这时候写一个长长的参数列表一点都不酷,且容易 出错,这时候就需要考虑C#的dynami ...

  6. jmx_exportter+prometheus+grafana监控hadoop

    0.介绍(摘录自https://www.hi-linux.com/posts/25047.html) 什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和 ...

  7. 彻底解决python cgi 编程出现的编码问题

    Answering this for late-comers because I don't think that the posted answers get to the root of the ...

  8. json的两种表示结构(对象和数组).。

    JSON有两种表示结构,对象和数组.对象结构以”{”大括号开始,以”}”大括号结束.中间部分由0或多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字和值之间以”:”分隔,语法结构如 ...

  9. TMOS_Order_of_Operations_v0.1

  10. 雅礼培训 Problem A 【线段树】

    题意 维护一段区间,支持求区间最大值,区间且,区间或 \(n,q<=2*10^5\) 题解 我们用线段树维护区间最大值 对于and和or运算, and实质就是强行把一些位改为0 or实质就是强行 ...