小程序项目之猫眼案例-源码

小程序页面结构


<!-- 简介 -->
<view class="detail"><!-- 背景滤镜 --><div class="filter" style="background-image: url(https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-21.jpg)"></div><view class="wrap"><!-- 封面 --><navigator url="./video"><text class="play"></text><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-21.jpg"></image></navigator><!-- 影片信息 --><view class="meta"><text class="name">侏罗纪世界2</text><text class="en">Jurassic World: Fallen Kingdom</text><text class="rank"><text class="pic"></text><text class="num">7.9</text></text><text class="count">(38.8万人评)</text><text class="type">动作,冒险,科幻</text><text class="">美国/128分钟</text><text class="date">2018-06-15大陆上映</text></view><!-- 操作 --><view class="action"><text>想看</text><text>评分</text></view></view>
</view><!-- 提示 -->
<view class="tips"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/egg.png"></image>有1个彩单，片尾字幕后
</view><!-- 简介 -->
<view class="brief {{spread ? 'spread' : ''}}"><view class="wrap">侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有三年。如今，纳布拉尔岛已经被人类遗弃，岛上幸存的恐龙们在丛林中自给自足。当岛上的休眠火山开始活跃以后，欧文（克里斯·帕拉特 饰）与克莱尔（布莱丝·达拉斯·霍华德 饰）发起了一场运动，想要保护岛上幸存的恐龙们免于灭绝。欧文一心想要找到自己依然失踪在野外的迅猛龙首领布鲁，克莱尔如今也尊重起这些生物，以保护它们为己任。两人在熔岩开始喷发时来到了危险的小岛，他们的冒险也揭开了一个可能让地球回到史前时代般混乱秩序的阴谋。</view><text class="more" bind:tap="spread"></text>
</view><!-- 演员表 -->
<view class="panel actor"><text class="title">演职人员</text><scroll-view scroll-x><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-1.jpg"></image><text class="name">胡安·安东尼奥·巴亚纳</text><text class="role">导演</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-2.jpg"></image><text class="name">费斯·费伊纳</text><text class="role">Mercenary</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-3.jpg"></image><text class="name">克里斯·帕拉特</text><text class="role">Owen Grady</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-4.jpg"></image><text class="name">布莱丝·达拉斯·霍华德</text><text class="role">Claire Dearing</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-5.jpg"></image><text class="name">泰德·拉文</text><text class="role">Ken Wheatley</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-6.jpg"></image><text class="name">托比·琼斯</text><text class="role">Gunnar Eversol</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-7.jpg"></image><text class="name">贾斯蒂斯·史密斯</text><text class="role">Franklin</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-8.jpg"></image><text class="name">詹姆斯·克伦威尔</text><text class="role">Benjamin Lockwood</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-9.jpg"></image><text class="name">黄荣亮</text><text class="role">Dr. Henry Wu</text></view><view class="cell"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-10.jpg"></image><text class="name">拉菲·斯波</text><text class="role">Eli Mills</text></view></scroll-view>
</view><!-- 票房 -->
<view class="panel sales"><text class="title">票房</text><view class="item"><text>1</text><text>昨日票房排行</text></view><view class="item"><text>73308</text><text>首周票房(万)</text></view><view class="item"><text>119001</text><text>累计票房(万)</text></view>
</view><!-- 视频和剧照 -->
<view class="panel media"><text class="title">视频和剧照</text><navigator>62</navigator><scroll-view scroll-x><view class="cell"><image class="video" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-1.jpg"></image><image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-2.jpg"></image><image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-3.jpg"></image><image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-4.jpg"></image><image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-5.jpg"></image><image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-6.jpg"></image></view></scroll-view>
</view><!-- 评论 -->
<view class="panel comments"><text class="title">观众评论</text><view class="item"><image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/avatar-1.jpg"></image><view class="info"><text>茶三刘</text><text class="rank"></text><text class="content">那个敲地板的恐龙真的要吓死我												


											

小程序项目之猫眼案例-代码相关推荐
	

    
						
  1. 用Jmeter做微信小程序项目接口测试【案例】
		
    公司新项目组开发一款微信小程序电商平台,为了更好保证产品质量,因此提出了需要进行接口测试. 从接口本身来讲,对其测试与其他项目应该是一样的.所以不难理解,我们要对小程序的接口测试需要准备的 材料有:  ...
    
		
    2. 
						
  2. 微信小程序项目转换成uniapp项目
		
    一.建立,代码如下: npm install miniprogram-to-uniapp -g 二.查看版本,代码如下: wtu -V 三.在命令行里,输入[wtu -i "你的小程序项目路 ...
    
		
    3. 
						
  3. uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释
		
    效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用. 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录.获取微信手机号登录. ...
    
		
    4. 
						
  4. 手把手带你学习微信小程序 —— 项目实战篇
		
    微信小程序项目实战篇 WeChat-applet 1.支付宝界面展示 2.微博发帖功能实现 3.时间格式化案例 4.微信红包界面展示 5.微信消息删除案例 6.微信icon 组件 6.1 支付成功界面 ...
    
		
    5. 
						
  5. 微信小程序开发 | 音乐小程序项目
		
    音乐小程序项目 3.1 开发前的准备 3.1.1 项目展示 3.1.2 项目分析 3.1.3 项目初始化 3.2 [任务1]标签页切换 3.2.1 任务分析 3.2.2 前导知识 3.2.3 编写页面 ...
    
		
    6. 
						
  6. 视频教程-微信小程序项目实战：电影购票系统-微信开发
		
    微信小程序项目实战:电影购票系统 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过100 ...
    
		
    7. 
						
  7. 视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
		
    微信小程序项目实战:高仿iOS计算器 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...
    
		
    8. 
						
  8. 2023年最新最全uniCloud入门学习，零基础入门到实战项目 uni-admin打造uniapp网页后端 微信支付宝抖音小程序后端 unicloud数据后台快速打造uniapp小程序项目
		
    今天开始带着大家一起零基础学习uniCloud,在下面的课程中我们就简称uniCloud为cloud吧.我这里从零基础开始教大家,后面可以带大家简单的做一个实战项目.所以不用担心自己没有基础,跟着石头 ...
    
		
    9. 
						
  9. 微信小程序的简单开发案例(记事本)
		
    微信小程序案例之简单记事本实现 我最近在学习微信小程序,主要熟悉了微信开发者工具的简单使用以及小程序的开发流程.微信小程序的学习要求不高,只要有一些web前端等知识基础即可. 1,小程序简介 微信小程 ...
    
		
    10. 
						
  10. [微信小程序]知识总结及案例汇总
		
    #目录 主要从以下几个方面给大家总结一下微信小程序相关的知识! ####1 前言 ####2.什么是小程序? ####3.微信小程序在微信开发中的位置? ####4.微信小程序框架–MINA #### ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. 面试官：说一下限流、熔断、高可用？好多人一脸懵！
		
    2. 
						
  2. #20145238荆玉茗《网络对抗》-逆向及Bof进阶实践
		
    3. 
						
  3. 无法打开文件“python310_d.lib”
		
    4. 
						
  4. HBase 系统架构
		
    5. 
						
  5. 多线程：Vector是线程安全的吗
		
    6. 
						
  6. SQL语言学习(四)常见函数学习
		
    7. 
						
  7. （*长期更新）软考网络工程师学习笔记——Section 3 宽带接入技术和导引型传输媒体
		
    8. 
						
  8. bootstrap ---  表单
		
    9. 
						
  9. matlab迭代次数,怎么知道程序中的迭代次数呢
		
    10. 
						
  10. day3-python学习笔记（二）list（数组）
		
    11. 
						
  11. 萌宠历险记html5游戏在线玩,《神武2》天外魔境现世 萌宠历险记首发
		
    12. 
						
  12. PHP导航栏管理,zblog导航栏管理设置的几种方法
		
    13. 
						
  13. cnpm : 无法加载文件 C:\Users\zsl\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本
		
    14. 
						
  14. 四象限法推导lm曲线_提出研究问题的“四象限法”
		
    15. 
						
  15. OSPF网络可以没有BDR(实验)
		
    16. 
						
  16. 滴滴出行小程序体积优化实践
		
    17. 
						
  17. 【神经网络与深度学习】CIFAR10数据集介绍，并使用卷积神经网络训练图像分类模型——[附完整训练代码]
		
    18. 
						
  18. 下一代计算机网络技术指什么,下一代计算机网络技术
		
    19. 
						
  19. 《咸鱼分享》咸鱼在线TOP
		
    20. 
						
  20. 从GIS地图生成生成建筑模型
		
    21. 
		

	


热门文章
	

    
									
  1. 工业机器人产业链展板_赵德明调研六大新产业十大产业链发展情况
			
    2. 
						
  2. 服务器自动关机重启1076,状态服务器上的事件 ID 1072 或1076 - ASP.NET | Microsoft Docs...
			
    3. 
						
  3. 熵(Entropy):机器学习
			
    4. 
						
  4. 利率里面的BP是什么意思,bp是什么意思贷款利率
			
    5. 
						
  5. 每日新闻：腾讯与Line携手在日本提供移动支付服务；阿里组织架构调整 行癫任阿里云智能总裁；每周要工作80小时才有可能改变世界...
			
    6. 
						
  6. 北京化工大学计算机考研资料汇总
			
    7. 
						
  7. 【SOJ 385】旅馆
			
    8. 
						
  8. 那些你可能不知道的 bilibili 奇技淫巧
			
    9. 
						
  9. In-band network telemetry
			
    10. 
						
  10. Mecanim动画系统学习笔记
			
    11.