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


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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
jQuery常用选择器详解
Jul 17 jQuery
javascript流程控制语句集合
Sep 18 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php include和require的区别深入解析
2013/06/17 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php中filter_input函数用法分析
2014/11/15 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
模拟select的代码
2011/10/19 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jQuery功能函数详解
2015/02/01 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
JavaScript实现随机五位数验证码
2019/09/27 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python中的格式化输出用法总结
2016/07/28 Python
Python将图片转换为字符画的方法
2020/06/16 Python
浅析python参数的知识点
2018/12/10 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
校园歌咏比赛主持词
2014/03/18 职场文书
合作协议书范本
2014/04/17 职场文书
学期评语大全
2014/04/30 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
离婚协议书范本
2015/01/26 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
nginx+lua单机上万并发的实现
2021/05/31 Servers
python实现层次聚类的方法
2021/11/01 Python