温馨提示×

温馨提示×

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

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

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

发布时间:2021-07-02 15:01:06 阅读:543 作者:小新 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

微信小程序仿猫眼

实现效果图:

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

movie.js

Page({
  data: {
    movies:null,
    scrollTop : 0,
    scrollHeight:0
  },
  onLoadfunction (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',
      duration10000
    })

    //网络请求数据
    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
     successfunction(res){
      // success
      let obj=res.data.data.movies;
      //将获取到的数据设置到 page 中的movies上
      thispage.setData({movies:obj});
      //隐藏加载框
      wx.hideToast();
      //停止刷新
      wx.stopPullDownRefresh();
     },
     failfunction() {
      // fail
     },
     completefunction() {
      // complete
     }
    })
  },
  //点击事件
  itemClick(event){
    

  },
  //刷新
  onPullDownRefreshfunction () {
  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 >预售</view>
  </view>
 </view>

movie.wxss

page{
 background-color#f2f2f2;
}
.top {
 background-color#f2f2f2;
 display: flex;
}

.top_text {
 margin-left15px;
 font-size15px;
 padding20px 0;
}

.top_input {
 border-radius10rpx;
 text-align: center;
 padding4px;
 font-size15px;
 flex1;
 margin10px 20px 10px 10px;
 background-color#fff;
}

.item {
 background-color#FFFFFF;
 position:relative;
 padding10px;
 display: flex;
 border-width:1px;
 border-bottom-style: solid;
 border-color#ccc;
}
.item_press {
 background-color#F0F0F0;
}

.pic image {
 margin-right10px;
 width70px;
 height100px;
}
.detail{
  flex1;
  display: flex;
  flex-direction: column;
}
.detail title{
  margin-top5px;
  color#222222;
  flex1;
  font-size16px;
}
.threeD{
  border-radius2px;
  padding3px;
  background-color#8bb7ce;
  font-size10px;
  color: white;
}
.iMax{
  border-style:solid;
  border-width:1px;
  margin-left: -2px;
  border-top-right-radius2px;
  border-bottom-right-radius2px;
  font-size10px;
  color#8bb7ce;
  padding2px;
}
.score,
.wish{
  float:right;
  color: orange;
  margin-right15px;
}

.type,
.star{
  color#666666;
  font-size13px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  width210px;
  flex1;
}
.showinfo{
  color#999999;
  font-size13px;
  flex1;
}

.buy{
  padding8px;
  border-radius5px;
  font-size13px;
  color#FFFFFF;
  background-color#ee4137;
  float: right;
  position: absolute;
  right10px;
  top:52px;
}

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

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

AI

开发者交流群×