首页 > 课堂 > 小程序 > 正文

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

2020-03-21 16:30:40
字体:
来源:转载
供稿:网友

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

微信小程序,猫眼电影

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.     getAllMovies() { 
  22.         let thispage=this
  23.         //展示 加载框 
  24.         wx.showToast({ 
  25.             title: '加载中'
  26.             icon: 'loading'
  27.             duration: 10000 
  28.         }) 
  29.         //网络请求数据 
  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'}, // 设置请求的 header 
  34.           success: function(res){ 
  35.             // success 
  36.             let obj=res.data.data.movies; 
  37.             //将获取到的数据设置到  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.     "enablePullDownRefresh"true 



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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表