轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
轻源码 门户 微信小程序 查看主题

微信小程序仿猫眼

发布者: miyoko | 发布时间: 2019-2-24 19:03| 查看数: 5448| 评论数: 0|帖子模式

作者:幼年程序猿,来自原文地址 

 
movie.js

  1. Page({
  2. data: {
  3. movies:null,
  4. scrollTop : 0,
  5. scrollHeight:0
  6. },
  7. onLoad: function (options) {
  8. // 生命周期函数--监听页面加载
  9. // 这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
  10. var that = this;
  11. wx.getSystemInfo({
  12. success:function(res){
  13. console.info(res.windowHeight);
  14. that.setData({
  15. scrollHeight:res.windowHeight
  16. });
  17. }
  18. });
  19. that.getAllMovies();
  20. },
  21. getAllMovies() {
  22. let thispage=this;
  23. //展示 加载框
  24. wx.showToast({
  25. title: '加载中',
  26. icon: 'loading',
  27. duration: 10000
  28. })
  29. //网络请求数据
  30. wx.request({
  31. url: ',
  32. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  33. header: {'content-type':'json'}, // 设置请求的 header
  34. success: function(res){
  35. // success
  36. let obj=res.data.data.movies;
  37. //将获取到的数据设置到 page 中的movies上
  38. thispage.setData({movies:obj});
  39. //隐藏加载框
  40. wx.hideToast();
  41. //停止刷新
  42. wx.stopPullDownRefresh();
  43. },
  44. fail: function() {
  45. // fail
  46. },
  47. complete: function() {
  48. // complete
  49. }
  50. })
  51. },
  52. //点击事件
  53. itemClick(event){
  54. },
  55. //刷新
  56. onPullDownRefresh: function () {
  57. this.getAllMovies();
  58. },
  59. })

movie.json

  1. {
  2. "enablePullDownRefresh": true
  3. }

movie.wxml

  1. <view class="top">
  2. <text class="top_text">深圳</text>
  3. <view class="top_input">
  4. <input placeholder="Q找影视剧、找影院" />
  5. </view>
  6. </view>
  7. <view class="item" wx:for="{{movies}}" wx:key="{{index}}" bindtap="itemClick" hover-class="item_press" hover="true" >
  8. <view class="pic">
  9. <image src="{{item.img}}"></image>
  10. </view>
  11. <view class="detail">
  12. <title>{{item.nm}}
  13. <text class="threeD" wx:if='{{item["3d"]}}'>3D</text>
  14. <text class="iMax" wx:if='{{item["imax"]}}'>IMAX</text>
  15. <text class="score" wx:if="{{item.preSale !=1}}">{{item.sc}}<text style='font-size:11px'></text>
  16. </text>
  17. <text class="wish" wx:else>{{item.wish}}<text style='font-size:11px'>人想看</text>
  18. </text>
  19. </title>
  20. <view class="type">
  21. {{item.cat}}
  22. </view>
  23. <view class="star">
  24. {{item.star}}
  25. </view>
  26. <view class="showinfo">
  27. {{item.showInfo}}
  28. </view>
  29. <view class="buy" wx:if="{{item.preSale !=1}}" >购买</view>
  30. <view class="buy" wx:else style="background:#008aff">预售</view>
  31. </view>
  32. </view>

movie.wxss

  1. page{
  2. background-color: #f2f2f2;
  3. }
  4. .top {
  5. background-color: #f2f2f2;
  6. display: flex;
  7. }
  8. .top_text {
  9. margin-left: 15px;
  10. font-size: 15px;
  11. padding: 20px 0;
  12. }
  13. .top_input {
  14. border-radius: 10rpx;
  15. text-align: center;
  16. padding: 4px;
  17. font-size: 15px;
  18. flex: 1;
  19. margin: 10px 20px 10px 10px;
  20. background-color: #fff;
  21. }
  22. .item {
  23. background-color: #FFFFFF;
  24. position:relative;
  25. padding: 10px;
  26. display: flex;
  27. border-width:1px;
  28. border-bottom-style: solid;
  29. border-color: #ccc;
  30. }
  31. .item_press {
  32. background-color: #F0F0F0;
  33. }
  34. .pic image {
  35. margin-right: 10px;
  36. width: 70px;
  37. height: 100px;
  38. }
  39. .detail{
  40. flex: 1;
  41. display: flex;
  42. flex-direction: column;
  43. }
  44. .detail title{
  45. margin-top: 5px;
  46. color: #222222;
  47. flex: 1;
  48. font-size: 16px;
  49. }
  50. .threeD{
  51. border-radius: 2px;
  52. padding: 3px;
  53. background-color: #8bb7ce;
  54. font-size: 10px;
  55. color: white;
  56. }
  57. .iMax{
  58. border-style:solid;
  59. border-width:1px;
  60. margin-left: -2px;
  61. border-top-right-radius: 2px;
  62. border-bottom-right-radius: 2px;
  63. font-size: 10px;
  64. color: #8bb7ce;
  65. padding: 2px;
  66. }
  67. .score,
  68. .wish{
  69. float:right;
  70. color: orange;
  71. margin-right: 15px;
  72. }
  73. .type,
  74. .star{
  75. color: #666666;
  76. font-size: 13px;
  77. overflow:hidden;
  78. white-space: nowrap;
  79. text-overflow:ellipsis;
  80. width: 210px;
  81. flex: 1;
  82. }
  83. .showinfo{
  84. color: #999999;
  85. font-size: 13px;
  86. flex: 1;
  87. }
  88. .buy{
  89. padding: 8px;
  90. border-radius: 5px;
  91. font-size: 13px;
  92. color: #FFFFFF;
  93. background-color: #ee4137;
  94. float: right;
  95. position: absolute;
  96. right: 10px;
  97. top:52px;
  98. }

最新评论

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

客服QQ点击咨询

微信公众号

APP客户端

Copyright © 2016-2019 http://www.qingyuanma.com/ 鲁ICP备17014494号

快速回复 返回顶部 返回列表