微信小程序入门与实战之电影页面与实战自定义组件
Movie自定义组件
Movie自定义组件包含三部分:图片、标题和图片,评分可以再单独写一个组件。
实现代码:
<view class="container"><image class="poster" src="/images/daomengkongjian.jpg"></image><text class="title">盗梦空间盗梦空间</text>
</view>
css代码中我们通过title里面的属性设置文字省略效果,为了能够直观地感受到效果我们必须给container设置宽度,当文字超过宽度的时候就会显示省略号,效果如下图所示:
.container{display: flex;flex-direction: column;width: 200rpx;
}
.poster{width: 200rpx;height: 270rpx;margin-bottom: 22rpx;
}
.title{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;
}
使用LinUI评分组件快速实现分数预览
首先在自定义组件中引入LInUI的评分组件:
接着就可以直接使用:
<view class="rate-container"><l-rate count="5" size="22" disabled="{{true}} "score="3"/><text class="score">3.0</text></view>
wxss代码:
.rate-container{margin-top: 6rpx ;display: flex;flex-direction: row;align-items: baseline;
}
.score{margin-left: 20rpx;font-size: 24rpx;
}
实现效果:
简易评分组件的实现思路
通过列表循环实现多个星星,并通过条件渲染设置每个星星是否被选中。
数组中1对应为选中,0对应为不选中,所以分别为三星、二星、一星
巧用Flex布局的space-between进行分布排列
我们自定义组件Movielist中使用自定义组件movie:
<view class="container"><view class="title-container"><text>正在热映</text><text>更多</text></view><view class="movie-container"><movie></movie><movie></movie><movie></movie></view>
</view>
我们使用flex布局中的justify-content: space-between;实现均匀的两端分布:
.container{padding: 30rpx 28rpx;
}
.title-container{display: flex;flex-direction: row;justify-content: space-between;
}
.movie-container{display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 28rpx;
}
实现效果如图所示:
调整自定义组件间距
在自定义组件中使用一些样式会没有效果,所以要要用外部样式类代替。
外部样式类externalClasses的使用
我们想要实现类似下图所示这种效果:
每个movielist之间是有间隔的,这时候我们就要使用外部样式类。在自定义的组件movielist中引入外部样式类:
movielist的wxml代码中使用外部样式类:
使用自定义组件时传入样式:
样式代码:
.movie-list{margin-bottom: 30rpx;
}
为了实现底部有间隔的效果,我们将整个movielist的背景改为透明:
使用组件的的页面的背景改为浅灰色就能实现上面的效果啦:
为了区分内部组件和外部组价优先级可以加个!important
小试牛刀访问服务端数据
为了实现不同item的标题不同:
在自定义组件中:
使用组件的时候传入title:
自定义组件中绑定数据title:
实现效果:
使用wx.request进行网络请求:
请求到的数据:
从服务器加载数据分页数据并传入自定义组件
我们现在将我们的假数据替换为服务器的真实数据:
js文件中定义数组数据:
onload函数中获取到数组数据并进行数据绑定:
wxml文件中传入数组数据给自定义组件movielist:
使用ES6箭头函数解决this指代问题
再将自定义组件movielist的数据传入自定义组件movie,现先将movielist用循环渲染改造:
<block wx:for="{{movies}}" wx:key="index"><movie movie="{{item}}"></movie></block>
自定义组件Movie中:
我们前面所写的
其实是错误的,this错误,我们可以用箭头函数解决这个问题:
绑定服务端电影数据
在自定义组件movie绑定数据:
<view class="container"><image class="poster" src="{{movie.images.large}}"></image><text class="title">{{movie.title}}</text><view class="rate-container"><l-rate count="5" size="22" disabled="{{true}} "score="{{movie.rating.stars/10}}"/><text class="score">{{movie.rating.average}}</text></view>
</view>
实现效果:
完成即将上映和top250
跟正在热映一样需要请求数据,
传入数据给自定义组件:
然后我们就能看到效果啦:
由于我们请求数据的API的前面部分相同,所以我们可以在app.js配置好baseurl:
我们在电影页面的Js代码中获取到APP示例:
用app中的变量请求数据:
微信小程序入门与实战之电影页面与实战自定义组件相关推荐
- 17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写 一.先上效果图 看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...
- github打开前端样式丢失_微信小程序入门教程之二:页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- image 微信小程序flex_微信小程序入门教程之二:页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- 微信小程序怎么把获取的值传到引用组件内_微信小程序如何将接口获取的数据传递给自定义组件...
2019-07-11 回答 不知道你是什么意思.帮你改了下 class program { static int n = 4; int i, m; dsd[] a = new dsd[n]; publ ...
- 【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
- 微信小程序入门与实战(七月)
微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
- A095_day01_微信小程序入门与组件
目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
- 微信小程序入门二:底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
最新文章
- PMCAFF出品|十一月30篇爆款文章合集,干货、技能、内涵齐飞,总有一款适合你
- 单轮MapReduce的矩阵乘法
- nginx服务器的文件大小的限制解决方法
- 麻省理工、微软为AI量身打造了一套leetcode编程题
- 11_条件随机场CRF1_统计学习方法
- shared memory global memory constant memory in cuda
- iOS开发网络篇—GET请求和POST请求(转)
- colab配合谷歌云盘使用
- ANdroid的QQ分享接入,android 集成QQ互联 (登录,分享)
- 【历史上的今天】10 月 1 日:仙童半导体公司诞生;斯坦福大学正式办学;万维网之父成立万维网联盟
- 服务器名称指示(SNI)是什么东东?
- NEFU OJ 1266-快乐的雨季-线段树【题解】
- 修理机器人基维斯_《魔兽世界》魔兽世界修理机器人心得
- Deepin系统无法卸载360的解决方法
- 做视频剪辑工作赚钱吗?
- SDN软件定义网络之OpenFlow协议
- C语言为什么经久不衰?最全入门笔记
- 天若OCR文字识别 v1.2.0
- H5页面点击调起腾讯/百度/高德地图APP
- 三菱伺服电机控制实例
热门文章
- SKT卫星仿真软件11.01+Starlink+Python/Matlab(内有网盘安装包+视频网站教程)
- HDU 5468 Puzzled Elena 莫比乌斯反演
- 【CCF】NOI2007试题下载
- java面向对象对象总述
- php返回第一个字符串的码点_PHP 字符串编码截取函数
- UiAutomator常用类之UI手势动作
- main.py: error: the following arguments are required:
- 杀死重装也杀不掉的病毒!
- VMware虚拟机,环境搭建详解(傻瓜式教学)
- STM32 I/O引脚复用