微信小程序仿貓眼電影的實現(xiàn)教程

movie.js

1. Page({ 
2.     data: { 
3.         movies:null, 
4.         scrollTop : 0, 
5.         scrollHeight:0 
6.     }, 
7.     onLoad: function (options) { 
8.         // 生命周期函數(shù)--監(jiān)聽頁面加載 
9.          // 這里要非常注意，微信的scroll-view必須要設(shè)置高度才能監(jiān)聽滾動事件，所以，需要在頁面的onLoad事件中給scroll-view的高度賦值 
10.         var that = this; 
11.         wx.getSystemInfo({ 
12.           success:function(res){ 
13.               console.info(res.windowHeight); 
14.               that.setData({ 
15.                   scrollHeight:res.windowHeight 
16.               }); 
17.           } 
18.       }); 
19.       that.getAllMovies(); 
20.     }, 
21.     getAllMovies() { 
22.         let thispage=this; 
23.         //展示 加載框 
24.         wx.showToast({ 
25.             title: '加載中', 
26.             icon: 'loading', 
27.             duration: 10000 
28.         }) 
29.         //網(wǎng)絡(luò)請求數(shù)據(jù) 
30.         wx.request({ 
31.           url: 'https://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1000', 
32.           method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 
33.           header: {'content-type':'json'}, // 設(shè)置請求的 header 
34.           success: function(res){ 
35.             // success 
36.             let obj=res.data.data.movies; 
37.             //將獲取到的數(shù)據(jù)設(shè)置到  page 中的movies上 
38.             thispage.setData({movies:obj}); 
39.             //隱藏加載框 
40.             wx.hideToast(); 
41.             //停止刷新 
42.             wx.stopPullDownRefresh(); 
43.           }, 
44.           fail: function() { 
45.             // fail 
46.           }, 
47.           complete: function() { 
48.             // complete 
49.           } 
50.         }) 
51.     }, 
52.     //點擊事件 
53.     itemClick(event){ 
54.     }, 
55.     //刷新 
56.     onPullDownRefresh: function () { 
57.     this.getAllMovies(); 
58.   }, 
59. }) 

movie.json

1. { 
2.     "enablePullDownRefresh": true 
3. } 

movie.wxml
 

1. <view class="top"> 
2.     <text class="top_text">深圳</text> 
3.     <view class="top_input"> 
4.       <input placeholder="Q找影視劇、找影院" /> 
5.     </view> 
6.   </view> 
7.   <view class="item" wx:for="{{movies}}" wx:key="{{index}}" bindtap="itemClick" hover-class="item_press" hover="true" > 
8.     <view class="pic"> 
9.       <image src="{{item.img}}"></image> 
10.     </view> 
11.     <view class="detail"> 
12.       <title>{{item.nm}}