微信小程序仿猫眼

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, CONNECTheader: {'content-type':'json'}, // 设置请求的 headersuccess: function(res){// successlet 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"]}}'>3Dtext><text class="iMax" wx:if='{{item["imax"]}}'>IMAXtext><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;
}

转载于:https://www.cnblogs.com/androidxufeng/p/6485266.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！