Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge of this article "how to achieve the effect of imitating a movie website page by WeChat Mini Programs", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this article "how WeChat Mini Programs achieves the effect of imitating a movie website page".

WeChat Mini Programs imitates cat's eyes

Realize the effect picture:

Movie.js

Page ({data: {movies:null, scrollTop: 0, scrollHeight:0}, onLoad: function (options) {/ / Lifecycle function-- listen for page loading / / pay close attention here. The scroll-view of Wechat must set a height to listen for scrolling events. Therefore, you need to assign var that = this to the height of scroll-view in the onLoad event of the page. Wx.getSystemInfo ({success:function (res) {console.info (res.windowHeight); that.setData ({scrollHeight:res.windowHeight});}}); that.getAllMovies ();}, getAllMovies () {let thispage=this / / Show the load box wx.showToast ({title: 'loading', icon: 'loading', duration: 10000}) / / Network request data 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'}, / / set the requested header success: function (res) {/ / success let obj=res.data.data.movies / / set the acquired data to thispage.setData ({movies:obj}) on movies in page; / / hide the load box wx.hideToast (); / / stop refreshing wx.stopPullDownRefresh () }, fail: function () {/ / fail}, complete: function () {/ / complete}})}, / / Click the event itemClick (event) {}, / / refresh onPullDownRefresh: function () {this.getAllMovies ();},})

Movie.json

{"enablePullDownRefresh": true}

Movie.wxml

Shenzhen {{item.nm}} 3D IMAX {{item.sc}} {{item.wish}} people want to see {{item.cat}} {{item.star}} {{item.showInfo}} purchase and pre-sale

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: 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 } the above is the content of this article on "how to achieve the effect of imitating movie website pages by WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.