How does WeChat Mini Programs achieve the effect of imitating the page of a movie website?
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.
