微信小程序仿猫眼电影的实现教程

微信小程序仿猫眼电影的实现教程

movie.js

Page({
    data: {
        movies:null,
        scrollTop : 0,
        scrollHeight:0
    },
    onLoad: function (options) {
        // 生命周期函数--监听页面加载
         // 这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
        var that = this;
        wx.getSystemInfo({
          success:function(res){
              console.info(res.windowHeight);
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
      that.getAllMovies();
    },
    getAllMovies() {
        let thispage=this;
        //展示 加载框
        wx.showToast({
            title: '加载中',
            icon: 'loading',
            duration: 10000
        })
        //网络请求数据
        wx.request({
          url: 'http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1000',
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          header: {'content-type':'json'}, // 设置请求的 header
          success: function(res){
            // success
            let obj=res.data.data.movies;
            //将获取到的数据设置到  page 中的movies上
            thispage.setData({movies:obj});
            //隐藏加载框
            wx.hideToast();
            //停止刷新
            wx.stopPullDownRefresh();
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
    },
    //点击事件
    itemClick(event){
    },
    //刷新
    onPullDownRefresh: function () {
    this.getAllMovies();
  },
})

movie.json

{
    "enablePullDownRefresh": true
}

movie.wxml

<view class="top">
    <text class="top_text">深圳</text>
    <view class="top_input">
      <input placeholder="Q找影视剧、找影院" />
    </view>
  </view>
  <view class="item" wx:for="{{movies}}" wx:key="{{index}}" bindtap="itemClick" hover-class="item_press" hover="true" >
    <view class="pic">
      <image src="{{item.img}}"></image>
    </view>
    <view class="detail">
      <title>{{item.nm}}