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


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 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
js实现图片实时时钟
Jan 15 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
利用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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
测绘工程专业个人自我评价
2013/12/01 职场文书
物业门卫岗位职责
2013/12/28 职场文书
爬山的活动方案
2014/08/16 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
师德师风整改措施
2014/10/24 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
详解Vue slot插槽
2021/11/20 Vue.js