微信小程序如何实现仿电影网站页面效果-创新互联

这篇文章主要介绍了微信小程序如何实现仿电影网站页面效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

微信小程序仿猫眼

实现效果图：

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

  深圳
  
   
  
 
 
  
   
  
  
   
   
    {{item.cat}}
   
   
    {{item.star}}
   
   
    {{item.showInfo}}
   
   购买
   预售
  
 

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;
}

感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序如何实现仿电影网站页面效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。