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


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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
详解AngularJS 模块化
Jun 14 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
vue 实现上传组件
May 31 Vue.js
用JS写一个发布订阅模式
Nov 07 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php安装swoole扩展的方法
2015/03/19 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python简单实现获取当前时间
2016/08/27 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
Python3常用内置方法代码实例
2019/11/18 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
基层党员公开承诺书
2014/05/29 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
党员民主评议总结
2014/10/20 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2014年化验室工作总结
2014/11/21 职场文书
学校食品安全责任书
2015/01/29 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
深入理解python协程
2021/06/15 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS