小程序怎么实现仿猫眼电影

发布时间:2022-03-07 10:16:55 作者:iii
来源:亿速云 阅读:242

本文小编为大家详细介绍“小程序怎么实现仿猫眼电影”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序怎么实现仿猫眼电影”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

实现实例

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;

}

读到这里,这篇“小程序怎么实现仿猫眼电影”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. python多线程如何秒爬猫眼电影
  2. 微信小程序如何实现仿电影网站页面效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序

上一篇:小程序怎么制作商品列表排序

下一篇:微信小程序媒体组件audio怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》