用vant为基础组件，做的一个电影小程序-影院列表，接口数据爬的猫眼的数据

这篇讲影院列表。

用到的接口：

https://m.maoyan.com/ajax/filterCinemas?ci=83

搭好的页面长这样：

wxml

<!-- 定位城市和搜索框 -->
<!-- <van-sticky> -->
<view class="cityAndSearch">
  <view class="city">
    <van-cell title="南昌" size="large" icon="location-o" />
  </view>
  <view class="search">
    <van-search class="search_a" value="{{ value }}" shape="round" placeholder="请输入搜索关键词" />
  </view>
</view>
<!-- </van-sticky> -->
<!--影院 -->
<van-tabs active="{{ active }}" bind:change="onChange" sticky>
<!-- 推荐影院列表 -->
  <van-tab title="推荐">
    <van-cell center 
    wx:key="index" 
    title="{{item.nm}}" 
    value="{{item.sellPrice}}km" 
    use-label-slot
    wx:for="{{cinemaList}}"
    size="normal"
    bindtap="goCinemaDetail"
    data-id="{{item.id}}"
    >
      <view slot="label">
        <!-- 详细地址 -->
        <view style="font-size: 14px;" class="desc">{{item.addr}}</view>
        <!-- 标签 -->
        <van-tag style="margin-right: 5px;" wx:for="{{item.tag.hallType}}" wx:for-item="ites" color="#58a9cb" plain>{{ites}}</van-tag>
        <van-tag color="#ff9900" wx:if="{{item.tag.vipTag != ''}}" plain>{{item.tag.vipTag}}</van-tag>
        
      </view>
    </van-cell>
  </van-tab>

  <van-tab title="全城">内容 2</van-tab>
  <van-tab title="品牌">内容 3</van-tab>
  <van-tab title="筛选">内容 4</van-tab>
</van-tabs>

 wxss

page {
  background-color: #f3f3f3;
}

.cityAndSearch {
  width: 100%;
  /* height: 40px; */
  /* border: 1px solid black; */
  display: flex;
  box-shadow: 0px 1px 2px #d1d0d0;
}

.cityAndSearch .city {
  width: 30%;
  /* margin-top: 6px; */
  /* height: 1000px; */
  /* border: 1px solid black; */
  border-bottom: 7px solid white;
}

.cityAndSearch .search {
  /* border: 1px solid black; */
  /* width: 74%; */
  flex: 1;
  /* line-height: 10px; */
}

.search .search_a {
  width: 85%;
  position: absolute;
  left: 70px;
  /* height: 150px; */
}

.desc {
  /* border: 1px solid black; */
  overflow: hidden;
  width: 270px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

js

// pages/cinema/cinema.js
const request = require('../../utils/promise.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    active: 0,
    cinemaList: []
  },

  onChange(event) {
    // console.log(event);
  },

  //页面初始化函数
  onLoad(){
    this.getCinemaData();
  },

  //获取影院信息https://i.maoyan.com/ajax/moreCinemas?movieId=0&day=2022-04-10&offset=0&limit=20&districtId=177&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1649600841704&cityId=83&optimus_uuid=175E5050B88911ECAC45C7435E6A144A16A67053B5644E4E99ECD6844FA4D20F&optimus_risk_level=71&optimus_code=10
  getCinemaData(){
    let that = this;
    let BaseAPI = 'https://i.maoyan.com';
    let date = new Date();
    let date_now = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate()
    // console.log(date_now);
    // console.log(date);
    let data = {
      movieId: 0,
      day: date_now,
      offset: 0,
      limit: 20,
      districtId: 177,
      lineId: -1,
      hallType: -1,
      brandId: -1,
      serviceId: -1,
      areaId: -1,
      stationId: -1,
      item: '',
      updateShowDay: true,
      reqId: 1649600841704,
      cityId: 83,
      optimus_uuid: '175E5050B88911ECAC45C7435E6A144A16A67053B5644E4E99ECD6844FA4D20F',
      optimus_risk_level: 71,
      optimus_code: 10
    }
    request.GET(BaseAPI,'/ajax/moreCinemas',data).then(res=>{
      console.log(res.data.cinemas.cinemas);
      that.setData({
        cinemaList: res.data.cinemas.cinemas
      })
      // console.log(res);
    })
  },
  //跳转到影院详情页面
  goCinemaDetail(e){
    console.log(e.currentTarget.dataset.id);
    wx.navigateTo({
      url: '/pages/cinemaDetail/cinemaDetail?id='+e.currentTarget.dataset.id,
      success(res){
        console.log(res);
      },
      fail(){
        console.log("接口调用失败");
      }
      
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})