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


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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
DOM事件探秘篇
Feb 15 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 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一个找二层目录的小东东
2012/08/02 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
js实现碰撞检测
2021/01/29 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript