导航：首页 > 开发技术 >

微信小程序怎么实现仿电影网站页面效果

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，这篇"微信小程序怎么实现仿电影网站页面效果"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这

千家信息网最后更新 2026年11月03日微信小程序怎么实现仿电影网站页面效果

这篇"微信小程序怎么实现仿电影网站页面效果"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"微信小程序怎么实现仿电影网站页面效果"文章吧。

微信小程序仿猫眼

实现效果图：

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

以上就是关于"微信小程序怎么实现仿电影网站页面效果"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。

很赞哦！