用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序仿猫眼

纸飞机 2018-3-8 09:37

作者:幼年程序猿,来自原文地址 movie.jsPage({ data: { movies:null, scrollTop : 0, scrollHeight:0 }, onLoad: function (options) { // 生命周期函数--监听页面加载 ...

作者:幼年程序猿,来自

原文地址



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: 'http://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. {
  2. "enablePullDownRefresh": true
  3. }

movie.wxml

  1. class="top">
  2. class="top_text">深圳
  3. class="top_input">
  4. placeholder="Q找影视剧、找影院" />
  5. class="item" wx:for="{{movies}}" wx:key="{{index}}" bindtap="itemClick" hover-class="item_press" hover="true" >
  6. class="pic">
  7. src="{{item.img}}">
  8. class="detail">
  9. </span><span class="pln" style="color: rgb(0, 0, 0);">{{item.nm}}</span></code></li><li cl="" <="" td=""> </li></ol></pre> </td> </tr> </table> <div class="o cl ptm pbm" style="display: none;"> <a href="misc.php?mod=invite&action=article&id=3540" id="a_invite" onclick="showWindow('invite', this.href, 'get', 0);" class="oshr oivt" style=" display:none;">邀请</a> </div> <!--[diy=diycontentbottom]--> <div id="diycontentbottom" class="area"></div> <!--[/diy]--> <!--[diy=diycontentclickbottom]--> <div id="diycontentclickbottom" class="area"></div> <!--[/diy]--> </div> <div id="click_div" class="mbm"> <table cellpadding="0" cellspacing="0" class="atd"> <tr><td> <a href="http://www.weikeba.cn/home.php?mod=spacecp&ac=click&op=add&clickid=1&idtype=aid&id=3540&hash=68bf898b3486b6824ba0eed2e61be761&handlekey=clickhandle" id="click_aid_3540_1" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/xianhua.gif" alt="鲜花" /><br /> 鲜花 </a> </td> <td> <a href="http://www.weikeba.cn/home.php?mod=spacecp&ac=click&op=add&clickid=2&idtype=aid&id=3540&hash=68bf898b3486b6824ba0eed2e61be761&handlekey=clickhandle" id="click_aid_3540_2" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/woshou.gif" alt="握手" /><br /> 握手 </a> </td> <td> <a href="http://www.weikeba.cn/home.php?mod=spacecp&ac=click&op=add&clickid=3&idtype=aid&id=3540&hash=68bf898b3486b6824ba0eed2e61be761&handlekey=clickhandle" id="click_aid_3540_3" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/leiren.gif" alt="雷人" /><br /> 雷人 </a> </td> <td> <a href="http://www.weikeba.cn/home.php?mod=spacecp&ac=click&op=add&clickid=4&idtype=aid&id=3540&hash=68bf898b3486b6824ba0eed2e61be761&handlekey=clickhandle" id="click_aid_3540_4" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/luguo.gif" alt="路过" /><br /> 路过 </a> </td> <td> <a href="http://www.weikeba.cn/home.php?mod=spacecp&ac=click&op=add&clickid=5&idtype=aid&id=3540&hash=68bf898b3486b6824ba0eed2e61be761&handlekey=clickhandle" id="click_aid_3540_5" onclick="showWindow(this.id, this.href);doane(event);"> <img src="static/image/click/jidan.gif" alt="鸡蛋" /><br /> 鸡蛋 </a> </td> </tr> </table> <script type="text/javascript"> function errorhandle_clickhandle(message, values) { if(values['id']) { showCreditPrompt(); show_click(values['idtype'], values['id'], values['clickid']); } } </script> </div> <div class="viewthread_foot cl"> <div class="bdsharebuttonbox cl" style="padding: 0 5px 20px 0;"> <em style="padding: 0; background: none; color: #999999;">分享至 :</em> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a> <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a> <a href="#" class="bds_more" data-cmd="more"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <span class="cutline" style="margin: 9px 10px 0 0;"></span> <a href="http://www.weikeba.cn/home.php?mod=spacecp&ac=favorite&type=article&id=3540&handlekey=favoritearticlehk_3540" id="a_favorite" onclick="showWindow(this.id, this.href, 'get', 0);" class="k_favorite">收藏</a> </div> <!--[diy=diycontentrelatetop]--> <div id="diycontentrelatetop" class="area"></div> <!--[/diy]--> <div class="pren pbm cl"> <em class="z"><span class="i_prev" title="上一篇"></span><a href="http://www.weikeba.cn/article-3539-1.html" title="上一篇">微信小程序-修改数据后页面不渲染,设置全局变量,自定义属性 ... ...</a></em> <em class="y"><span class="i_next" title="下一篇"></span><a href="http://www.weikeba.cn/article-3541-1.html" title="下一篇">微信小程序 MD5js使用方法,请求接口轮播图</a></em> </div> <div class="contacts cl"> </div> <div class="mbm hm"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-2718462611635319" data-ad-slot="9328625843"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> <!--[diy=diycontentrelate]--> <div id="diycontentrelate" class="area"></div> <!--[/diy]--> </div> </div> <div id="comment" class="bm cl"> <div class="comment_tit cl"> <a><strong>0</strong> 条回复</a> </div> <div id="comment_ul"> <ul> </ul> </div> </div> <div class="reply_box cl"> <div class="comment_box cl"> <form id="cform" name="cform" action="portal.php?mod=portalcp&ac=comment" method="post" autocomplete="off"> <div class="tedt" id="tedt"> <div class="area"> <textarea name="message" rows="3" class="pt" id="message" placeholder="登录后才能发表内容及参与互动" onkeydown="ctrlEnter(event, 'commentsubmit_btn');"></textarea> </div> </div> <div class="tedt_down"> <div class="z" style="margin: 6px 0 0 0;"><span id="seccode_cSd9049P" class="seccode_1"></span> <script type="text/javascript" reload="1">updateseccode('cSd9049P', '<sec> <span id="sec<hash>" onclick="showMenu(this.id);"><sec></span><div id="sec<hash>_menu" class="p_pop p_opt" style="display:none"><sec></div>', 'portal::view');</script> </div> <input type="hidden" name="portal_referer" value="portal.php?mod=view&aid=3540#comment"> <input type="hidden" name="referer" value="portal.php?mod=view&aid=3540#comment" /> <input type="hidden" name="id" value="0" /> <input type="hidden" name="idtype" value="" /> <input type="hidden" name="aid" value="3540"> <input type="hidden" name="formhash" value="9ae0709f"> <input type="hidden" name="replysubmit" value="true"> <input type="hidden" name="commentsubmit" value="true" /> <button type="submit" name="commentsubmit_btn" id="commentsubmit_btn" value="true" class="pn y">发表回复</button> </div> </form> </div> </div> <script type="text/javascript"> jQuery(function(){ jQuery("#tedt .pt").focus(function(){ jQuery(this).addClass("bgchange"); }).blur(function(){ jQuery(this).removeClass("bgchange"); }); }); </script> <!--[diy=diycontentcomment]--> <div id="diycontentcomment" class="area"></div> <!--[/diy]--> </div> </div> <div class="sd pph" style="width: 310px; padding: 0; box-shadow: none; background: none;"> <!--[diy=diy6]--> <div id="diy6" class="area"></div> <!--[/diy]--> <div id="recommendArticle"> <!--[diy=diy7]--> <div id="diy7" class="area"></div> <!--[/diy]--> </div> </div> </div> <div class="wp mtn"> <!--[diy=diy3]--> <div id="diy3" class="area"></div> <!--[/diy]--> </div> <input type="hidden" id="portalview" value="1"> <script type="text/javascript"> jQuery(function() { jQuery("span").click(function() { var thisEle = jQuery("#article_content").css("font-size"); var textFontSize = parseFloat(thisEle, 10); var unit = thisEle.slice( - 2); var cName = jQuery(this).attr("class"); if (cName == "bigger") { if (textFontSize <= 22) { textFontSize += 2; } } else if (cName == "smaller") { if (textFontSize >= 12) { textFontSize -= 2; } } jQuery("#article_content").css("font-size", textFontSize + unit); }); }); </script> </div> <div id="footer" class="footer cl"> <div id="ft" class="wp cl"> <div class="footer-left cl">Copyright © 2016 <a href="http://www.weikeba.cn">微客吧</a> - <a href="http://www.miitbeian.gov.cn/" target="_blank">蜀ICP备13020367号-4</a><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51070402110201" style="margin-left: 10px;"><img src="http://www.weikeba.cn/static/image/gabeian.png">川公网安备 51070402110201号</a>  <a href="http://discuz.qq.com/service/security" target="_blank" title="防水墙保卫网站远离侵害"><img src="static/image/common/security.png"></a> <div style="display: none;"><script src="http://v1.cnzz.com/stat.php?id=5879995&web_id=5879995" language="JavaScript"></script></div> </div> </div> <script src="home.php?mod=misc&ac=sendmail&rand=1527258111" type="text/javascript"></script> <div id="share"> <a href="tougao" class="c-goto-top-item c-goto-top-item--contribute c-goto-top-link"></a> <a id="totop" title="">返回顶部</a> </div> <script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ //首先将#back-to-top隐藏 jQuery("#share").hide(); //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 jQuery(function () { jQuery(window).scroll(function(){ if (jQuery(window).scrollTop()>100){ jQuery("#share").fadeIn(); } else { jQuery("#share").fadeOut(); } }); //当点击跳转链接后,回到页面顶部位置 jQuery("#totop").click(function(){ jQuery('body,html').animate({scrollTop:0},500); return false; }); }); }); </script> <div id="discuz_tips" style="display:none;"></div> <script type="text/javascript"> var tipsinfo = '60350521|X3.3|0.6||0||0|7|1527258111|9000df73feff2e07c26aa7a1415bdcc2|2'; </script> <script src="http://discuz.gtimg.cn/cloud/scripts/discuz_tips.js?v=1" type="text/javascript" charset="UTF-8"></script></div> </div> </body></html>