微信小程序 项目实战(二)board 首页
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 首页的更多相关文章
- 微信小程序项目实战之天气预报
概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
- 微信小程序项目实战之豆瓣天气
概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
- 微信小程序项目实战 - 菜谱大全
1. 项目简介 最近研究小程序云开发,上线了一个有关菜品查询的小程序.包括搜索.分享转发.收藏.查看历史记录等功能.菜谱 API 来自聚合数据.云开发为开发者提供完整的云端支持,弱化后端和运维概念,无 ...
- 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页
步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...
- 微信小程序 项目实战(三)list 列表页 及 item 详情页
1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载 ...
- 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装
WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 微信小程序开发01 --- 微信小程序项目结构介绍
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...
随机推荐
- day23 02 组合(继续人狗大战游戏)
day23 02 组合(继续人狗大战游戏) 面向对象的三大特性:继承 多态 封装 先讲解一下组合 组合:一个对象的属性值是另一个类的对象:对象.属性.属性(一般有两个点) 继续扩展day22 01里面 ...
- file结构体
struct file结构体定义在include/linux/fs.h中定义.文件结构体代表一个打开的文件,系统中的每个打开的文件在内核空间都有一个关联的 struct file.它由内核在打开文件时 ...
- HDU 3790 (最短路 + 花费)
题意: 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的. #include<bits/stdc ...
- python之动态参数 *args,**kwargs(聚合,打散)
一.函数的动态参数 *args,**kwargs, 形参的顺序1.你的函数,为了拓展,对于传入的实参数量应该是不固定,所以就需要用到万能参数,动态参数,*args, **kwargs 1,*args ...
- as eclipse 对比
eclipse目录结构 src:存放prj源码 gen:自动生成文件,R类存放资源文件的唯一id android+版本:项目jar包 assets:res存放资源文件,不会被gen生成资源id,同过a ...
- wireshark抓文件上传的包的结果记录
如果我们再一个表单中放了一个text的input 还放了一个file的input进行文件上传,此时用wireshark抓到的包应该是什么样子的呢 html代码 <form action=&quo ...
- UI测试点
UI测试点 1.界面是否美观 2.元素大小 3.界面元素是否对齐方式统一 4.界面字体属性是否正确 5.界面链接及触发动作 6.元素内容是否显示正确.易懂.友好 7.所有输入框进行输入判断测试 8.所 ...
- 03-for循环in遍历
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【Luogu】P1119灾后重建(Floyd)
题目链接 见题解: feilongz. 这里只放代码. #include<cstdio> #include<cstring> #include<cstdlib> # ...
- 【Luogu】P1896互不侵犯King(状压DP)
题目链接 真是可恶,被数据范围坑了一把.想要一遍AC的希望破灭了…… 以后大家在做状压DP的时候一定要开long long…… 设f[i][j][k]表示考虑前i行,总共放了j个King,第i行状态为 ...