目标效果：模拟点击切换电影

第一步：布局

底层蓝色banner盒子，每个电影图片用film-item盒子包裹，然后所有的图片盒子放在filmbox盒子中。

最后移动的时候，就是控制filmbox的定位left属性。

第二步：给图片盒子写点击事件

这里点击事件做了3件事。

获得了被点击电影的下标indexA

计算出了被点盒子的左定位left

记录了当前电影的全部信息film，用于后续显示！

获取手机屏幕宽度

这里我们发现，想要计算left我们需要拿到屏幕的宽度

整体移动和图片变大

这里移动是给行内样式赋给了一个left变量，我们控制left变量的数值，即可控制整体移动。

图片变大也是类似的原理，但是我们需要判断点击盒子的下标是否是当前下标，换句话说，仅有当前被点的盒子才可以变大，这里使用了三元表达式。

难点

主要是很多细节需要考虑

比如首次进入，该放大哪个图片？这里需要结合filmId考虑。点击之后，盒子移动多少?这里需要仔细计算。

写的时候感觉有点复杂，但总结起来似乎没啥？

附上JS代码

// pages/cinemaDetail/index.js
import { getCinemaDetailAPI, getFilmsAPI } from "../service/cinema";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cinemaId: -1,
    filmId:-1,
    cinema: null,
    show: false,//遮罩层
    films: null,//存放轮播展示的电影数据
    screenW: -1,//屏幕的宽度
    left:"",
    indexA:0,//被点击图片的下标
    film:null,//被点击电影


  },
  // 获取影院详情
  async getCinemaDetail() {
    let res = await getCinemaDetailAPI({
      cinemaId: this.data.cinemaId,
      k: 1579384


    })
    console.log("影院详细：", res.data.data.cinema);
    this.setData({
      cinema: res.data.data.cinema,
    })
    console.log("影院详细：", this.data.cinema);
  },
  //影院服务的点击
  clickme() {
    console.log("预备弹出界面！");
    this.setData({ show: true });
  },
  //遮罩层测试
  onClickShow() {
    this.setData({ show: true });
  },

  onClickHide() {
    this.setData({ show: false });
  },
  //API引入该影院的影片进行轮播
  async getFilmData() {
    let res = await getFilmsAPI({
      cinemaId: this.data.cinemaId,
      k: 5283900
    })
    // console.log(res.data.data.films);
    this.setData({
      films: res.data.data.films,
      // name:this.data.films[0].name
    })
    console.log("轮播的影片情报", this.data.films);
     let index=this.data.films.findIndex(element => element.filmId == this.data.filmId);
    console.log("当前电影的下标",index);
    //获得films列表之后，立马取出当前页的film信息，将初始的indexA设置为当前电影下标index,这样初次进入就会在正确的位置
    this.setData({
      indexA:index,
      left:(this.data.screenW/2-36-100*index)+"px",
      film:this.data.films[index],
    })
  
  },
  //获取屏幕宽度
  getScreenWidth() {
    // console.log(wx.getSystemInfoSync().windowWidth, '宽')
    // console.log(wx.getSystemInfoSync().windowHeight, '长')
    this.setData({
      screenW:wx.getSystemInfoSync().windowWidth,
    })
    console.log("屏幕宽",this.data.screenW);
    // let index=this.data.films.findIndex(element => element.filmId === filmId);
    

  },
  //图片的点击事件
  clickimg(e){
    console.log("图片被点了",e);
    let index=e.currentTarget.dataset.indexa;
    this.setData({
      indexA:index
    })
    this.setData({
      left:(this.data.screenW/2-100*index-36)+"px",
      film:this.data.films[this.data.indexA],
      // imageH:"120px",
      // imageW:"72px"
    })
    console.log("indexA",this.data.indexA);
    

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad({ cinemaId,filmId }) {

    console.log(cinemaId,filmId);
    this.setData({
      cinemaId: cinemaId,
      filmId:filmId
    })
    this.getCinemaDetail();
    this.getFilmData();
    this.getScreenWidth();
   
    
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
    

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})