微信小程序入门与实战之电影页面与实战自定义组件

这篇具有很好参考价值的文章主要介绍了微信小程序入门与实战之电影页面与实战自定义组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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中的变量请求数据:
微信小程序入门与实战之电影页面与实战自定义组件文章来源地址https://www.toymoban.com/news/detail-477167.html

到了这里,关于微信小程序入门与实战之电影页面与实战自定义组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)

     注意:下载完成后,需要删除 miniprogram_npm 目录后,重新构建 npm。 注意:ts编写的话,方法中使用this,需要在参数中定义this: any,否则会提示错误 引入onLoad()方法中引入createStoreBindings将store上的方法和属性绑定到页面中 在unOnLoad()方法中销毁destroyStoreBindings() 页面中使用:

    2024年02月16日
    浏览(48)
  • 【微信小程序】6天精准入门(第4天:自定义组件及案例界面)附源码

            从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。         开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的

    2024年02月08日
    浏览(34)
  • 微信小程序(页面组件)

    1.1 组件的定义及属性 组件是页面视图层(WXML)的基本组成单元,组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图    基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。 每一个组件都由一对标签组成,有开始台标签和

    2024年04月11日
    浏览(31)
  • 微信小程序第四章(页面组件)

    了解小程序组件 掌握视图容器组件 掌握基础内容组件 掌握表单组件 掌握多媒体组件 掌握其他高级组件 组件是页面视图层(WXML)的基本组成单元,组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了器视图、基础内容、表单、导航、多媒体、地图、画布、开放

    2024年04月25日
    浏览(52)
  • 微信小程序拍照页面自定义demo

    api文档

    2024年02月07日
    浏览(38)
  • 第四章 微信小程序页面组件作业

    步骤: 在index.js中输入代码: 在index.json中输入代码: 在index.wmxl中输入代码: 运行结果如下: 步骤: 插入所需要的图片在images中 在index.wxss中输入代码: 在index.json中输入代码: 在index.wxml中输入代码: 运行效果: 在index.wxml中输入代码: 在index.js中输入代码: 运行效果:

    2024年04月08日
    浏览(44)
  • 微信小程序实现数值监听(页面和组件属性)

    简介 目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据,请跳转至另一个文章介绍 为什么需要监听属性值 当需要通过一个属性变化时候,需要计算相应的方法等。pc网站经常需要监听属性,那么小程序应该怎么去实现? 1、首先创建公共的

    2024年02月09日
    浏览(52)
  • 【微信小程序】自定义组件(三)

    插槽 1、什么是插槽 在自定义组件的wxml结构中,可以提供一个 solot 节点(插槽),用于承载组件使用者提供的wxml结构 2、单个插槽 在小程序中,默认每个自定义组件中只允许使用一个 slot 进行占位,这种个数上的限制叫做单个插槽。 3、定义多个插槽 父子组件之间的通信

    2024年02月04日
    浏览(54)
  • 【微信小程序】自定义组件(一)

    🎁 写在前面: 观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。 今天牛牛带来的是微信小程序的自定义组件入门知识,赶紧拿起小本本做笔记呀! 1.1 介绍 自定义组件,就是开发者将页面的某个功能模块抽象化并提取出来的代码块,支持复用,

    2023年04月08日
    浏览(66)
  • 【微信小程序】自定义组件(一)

    组件的创建与引用 1、创建组件 在项目的根目录中,鼠标右键,创建 components - test 文件夹 在新建的components - test文件夹上,鼠标右键,点击\\\"新建Component\\\" 键入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为 js, json, .wxml 和.Wxss 注意:为了保证目录结构的清

    2024年02月05日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包