微信小程序 仿猫眼实现实例代码


Posted in Javascript onMarch 14, 2017

微信小程序仿猫眼

实现效果图:

微信小程序 仿猫眼实现实例代码

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
vue实现简单加法计算器
Oct 22 Javascript
利用js定义一个导航条菜单
Mar 14 #Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 #Javascript
使用BootStrap实现标签切换原理解析
Mar 14 #Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 #Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 #Javascript
AngularJS实现页面定时刷新
Mar 14 #Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 #Javascript
You might like
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
利用python代码写的12306订票代码
2015/12/20 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python异常处理try except过程解析
2020/02/03 Python
Python气泡提示与标签的实现
2020/04/01 Python
《中华少年》教学反思
2014/02/15 职场文书
工程专业应届生求职信
2014/02/19 职场文书
聘任书模板
2014/03/29 职场文书
英文升职感谢信
2015/01/23 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
python关于集合的知识案例详解
2021/05/30 Python
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript