微信小程序仿猫眼

作者：幼年程序猿，来自原文地址

 
movie.js

1. Page({
2. data: {
3. movies:null,
4. scrollTop : 0,
5. scrollHeight:0
6. },
7. onLoad: function (options) {
8. // 生命周期函数--监听页面加载
9. // 这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的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.  
22. getAllMovies() {
23. let thispage=this;
24. //展示 加载框
25. wx.showToast({
26. title: '加载中',
27. icon: 'loading',
28. duration: 10000
29. })
30.  
31. //网络请求数据
32. wx.request({
33. url: 'http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1000',
34. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
35. header: {'content-type':'json'}, // 设置请求的 header
36. success: function(res){
37. // success
38. let obj=res.data.data.movies;
39. //将获取到的数据设置到 page 中的movies上
40. thispage.setData({movies:obj});
41. //隐藏加载框
42. wx.hideToast();
43. //停止刷新
44. wx.stopPullDownRefresh();
45. },
46. fail: function() {
47. // fail
48. },
49. complete: function() {
50. // complete
51. }
52. })
53. },
54. //点击事件
55. itemClick(event){
56.  
57.  
58. },
59. //刷新
60. onPullDownRefresh: function () {
61. this.getAllMovies();
62. },
63. })

movie.json

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

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}}
13.