微信小程序电影详情功能实现

最新推荐文章于 2024-08-09 08:10:47 发布

ddddyla

最新推荐文章于 2024-08-09 08:10:47 发布

阅读量1.5w

点赞数 10

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_43904465/article/details/91348812

版权

本文介绍了如何在微信小程序中实现电影详情页面，包括点击电影列表跳转、页面布局设计（采用flex布局）、事件处理、网络请求以及scroll-view的水平滚动功能。详细讲解了通过bindtap事件获取电影ID，请求电影详情信息并展示在页面上的过程。

摘要由CSDN通过智能技术生成

实现电影详情页

主要实现的功能是：点击热映及top列表中的电影可以跳转到电影详情页面

一、主要需求：

基本的布局改变（多使用flex布局），图文混排
事件处理；网络请求
水平滚动scroll-view的实现

二、关键实现思路：

使用bindtap绑定点击事件，给电影列表中的每一条信息循环绑定一个点击事件，当点击时，将从网络获取的电影id传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。
详情页上部分显示电影宣传海报，影片名及影片的基本信息，中间显示电影请节简介，下部分显示主演照片及姓名。对于过长的篇幅的处理是是页面可以进行上下滑动。

三、实际代码：

对热映及top电影列表页的改变：
修改index和movetop文件夹下的index.wxml文件。
index下的index.wxml：（更改布局及类型）

<!--index.wxml-->
<view class="box">

  <!--轮播图-->
  <swiper indicator-dots="{
  {indicatorDots}}" autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}">
    <block wx:for="{
  {imgUrls}}" wx:key="{
  {item}}">
      <swiper-item>
        <image src="{
  {item}}" />
      </swiper-item>
    </block>
  </swiper>

  <!--热映列表展示-->
  
   <view class="item" bindtap="showInfo" data-id="{
  {item.id}}" hover-class="tapClass"
  wx:for="{
  {moves}}" wx:key="{
  {item}}">
 
      <image class="img" mode="aspectFit" src="{
  {item.images.large}}"></image>
 
      <view class="movie-info">
      <view class="movie-row">
        <span class="content">{
  {item.title}}</span>
      </view>
       
 
        <view class="movie-row">
          <text class="label">主演:</text>
          <s