小程序仿猫眼电影实现实例
惠民小程序小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈小程序仿猫眼电影实现实例。 最新消息, 最新消息,有微信小程序开发者,开发提交的小程序总是审核不过,不知道出了什么问题,而以前同样的内容都能通过审核。 据开发者介绍,他们提交的小程序被打回的原因是:小程序服务提供的内容涉及商业推广,属个人未开放类目。 经网络媒体披露,微信小程序开发时,在查询个 猫眼电影作为一个电影售票小程序,提供在线选座,电影信息查询等功能,那么如何仿照猫眼电影开发小程序呢?以下是小程序仿猫眼电影实现实例 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 movie.wxss page{ background-color: #f2f2f2; } .top { background-color: #f2f2f2; display: flex; } .top_text { margin-left: 15px; font-size: 15px; padding: 20px 0; } .top_input { border-radius: 10rpx; text-align: center; padding: 4px; font-size: 15px; flex: 1; margin: 10px 20px 10px 10px; background-color: #fff; } .item { background-color: #FFFFFF; position:relative; padding: 10px; display: flex; border-width:1px; border-bottom-style: solid; border-color: #ccc; } .item_press { background-color: #F0F0F0; } .pic image { margin-right: 10px; width: 70px; height: 100px; } .detail{ flex: 1; display: flex; flex-direction: column; } .detail title{ margin-top: 5px; color: #222222; flex: 1; font-size: 16px; } .threeD{ border-radius: 2px; padding: 3px; background-color: #8bb7ce; font-size: 10px; color: white; } .iMax{ border-style:solid; border-width:1px; margin-left: -2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; font-size: 10px; color: #8bb7ce; padding: 2px; } .score, .wish{ float:right; color: orange; margin-right: 15px; } .type, .star{ color: #666666; font-size: 13px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; width: 210px; flex: 1; } .showinfo{ color: #999999; font-size: 13px; flex: 1; } .buy{ padding: 8px; border-radius: 5px; font-size: 13px; color: #FFFFFF; background-color: #ee4137; float: right; position: absolute; right: 10px; top:52px; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |