微信小程序仿猫眼
实现效果图：
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
<view class="top">
<text class="top_text">深圳</text>
<view class="top_input">
<input placeholder="q找影视剧、找影院" />
</view>
</view>
<view class="item" wx:for="{{movies}}" wx:key="{{index}}" bindtap="itemclick" hover-class="item_press" hover="true" >
<view class="pic">
<image src="{{item.img}}"></image>
</view>
<view class="detail">
<title>{{item.nm}}
<text class="threed" wx:if='{{item["3d"]}}'>3d</text>
<text class="imax" wx:if='{{item["imax"]}}'>imax</text>
<text class="score" wx:if="{{item.presale !=1}}">{{item.sc}}<text style='font-size:11px'>分</text>
</text>
<text class="wish" wx:else>{{item.wish}}<text style='font-size:11px'>人想看</text>
</text>
</title>
<view class="type">
{{item.cat}}
</view>
<view class="star">
{{item.star}}
</view>
<view class="showinfo">
{{item.showinfo}}
</view>
<view class="buy" wx:if="{{item.presale !=1}}" >购买</view>
<view class="buy" wx:else style="background:#008aff">预售</view>
</view>
</view>
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;
}
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
如对本文有疑问， 点击进行留言回复！！
教你搭建 nodejs+mongoose+Graphql+Vue+Typescript 框架（上）
【Nginx】如何为已安装的Nginx动态添加模块？看完我懂了！！
网友评论