本文小编为大家详细介绍“小程序怎么实现仿猫眼电影”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序怎么实现仿猫眼电影”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。实现实例
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;
}读到这里,这篇“小程序怎么实现仿猫眼电影”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注百云主机行业资讯频道。
本篇内容介绍了“jquery比较中文字符的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 其实在jquery里把字符串转换为数字,用的还是js,因为jq…
免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。