Shulou(Shulou.com)06/01 Report--

The editor of this article introduces in detail how Mini Program can imitate Cat's Eye Movie, with detailed content, clear steps and proper handling of details. I hope this article "how to achieve Mini Program imitating Cat's Eye Movie" can help you solve your doubts. Let's follow the editor's train of thought to learn new knowledge.

Implementation example

Movie.js

Page ({

Data: {

Movies:null

ScrollTop: 0

ScrollHeight:0

}

OnLoad: function (options) {

/ / Lifecycle function-- listen for page loading

/ / it should be noted here that the height of the scroll-view of Wechat must be set to listen for scrolling events. Therefore, the height of scroll-view needs to be assigned in the onLoad event of the page.

Var that = this

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 header of the request

Success: function (res) {

/ / success

Let obj=res.data.data.movies

/ / set the acquired data to the movies in page

Thispage.setData ({movies:obj})

/ / hide the load box

Wx.hideToast ()

/ / stop refreshing

Wx.stopPullDownRefresh ()

}

Fail: function () {

/ / fail

}

Complete: function () {

/ / complete

}

})

}

/ / Click event

ItemClick (event) {

}

/ / Refresh

OnPullDownRefresh: function () {

This.getAllMovies ()

}

})

Movie.json

{

"enablePullDownRefresh": true

}

Movie.wxml

Shenzhen {{item.nm}} 3DIMAX {{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: 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

}

After reading this, the article "how to imitate Cat's Eye Movie by Mini Program" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about the article, welcome 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.