模擬微信小程式頁面Page方法

grax發表於2020-11-13
微信小程式

1、依賴

a、jQuery

b、angularjs

2、page.js檔案

  1 var Page = function (options) {
  2             var myApp = angular.module('myApp', []);
  3             myApp.controller('myCtrl', function ($scope) {
  4                 $scope.setData = function (obj) {
  5                     for (let key in obj) {
  6                         eval("$scope." + key + "=obj[key]");
  7                     }
  8                     $scope.$applyAsync();
  9                 }
 10             });
 11             const {
 12                 onLoad,
 13                 onReady,
 14                 onPullDownRefresh,
 15                 onReachBottom,
 16                 onPageScroll
 17             } = options;
 18             options.onLoad = function (obj) {
 19                 options.setData(this.data);
 20                 onLoad && onLoad.call(this, obj)
 21             }
 22             options.onReady = function (opts) {
 23                 onReady && onReady.call(this, opts)
 24             }
 25             options.onPullDownRefresh = function (opts) {
 26                 onPullDownRefresh && onPullDownRefresh.call(this, opts)
 27             }
 28             options.stopPullDownRefresh = function () {
 29                 clearTimeout(__navAnimateGoTopTimeout);
 30                 $("#TheStatusRefresh").stop().animate({ top: "-40px" }, "fast", function () {
 31                     __navAnimatelock = false;
 32                     $("#TheStatusRefresh img").removeClass("route");
 33                 });
 34             }
 35             options.onReachBottom = function (opts) {
 36                 onReachBottom && onReachBottom.call(this, opts)
 37             }
 38             options.onPageScroll = function (opts) {
 39                 onPageScroll && onPageScroll.call(this, opts)
 40             }
 41             options.setData = function (obj) {
 42                 for (let key in obj) {
 43                     eval("options.data." + key + "=obj[key]");
 44                 }
 45                 var appElement = document.querySelector("[ng-controller=myCtrl]");
 46                 var $scope = angular.element(appElement).scope();
 47                 var fun = $scope.$eval("setData");
 48                 fun(obj);
 49             };
 50 
 51             var __disY, __startY, __endY;
 52             var __navAnimatelock = false;
 53             var __navAnimateGoTopTimeout;
 54             var GetParamsToJson = function () {
 55                 var obj = {};
 56                 var url = $(location).attr('href');
 57                 if (url.indexOf("?") == -1) {
 58                     return {};
 59                 }
 60                 var arr = decodeURI(url).split("?")[1].split("&")
 61                 for (var i = 0; i < arr.length; i++) {
 62                     obj[arr[i].split("=")[0]] = unescape(arr[i].split("=")[1]);
 63                 }
 64                 return obj;
 65             }
 66 
 67             window.onload = function () {
 68                 var opts = GetParamsToJson();
 69                 options.onReady(opts);
 70             }
 71             $(document).ready(function () {
 72                 var opts = GetParamsToJson();
 73                 options.onLoad(opts);
 74                 $("body").on("click", "[click]", function () {
 75                     var func = $(this).attr("click");
 76                     if (options.hasOwnProperty(func)) {
 77                         options[func](this);
 78                     }
 79                 });
 80             });
 81             $(window).scroll(function (e) {
 82                 var scrollTop = $(this).scrollTop();
 83                 var viewH = $(this).height();
 84                 var contentH = $(document).height();
 85                 if (contentH - viewH - scrollTop <= 1) {
 86                     options.onReachBottom();
 87                 }
 88                 options.onPageScroll({ scrollTop: scrollTop });
 89             });
 90 
 91             if (onPullDownRefresh) {
 92                 $(document).on('touchstart', function (e) {
 93                     if (__navAnimatelock) {
 94                         return;
 95                     }
 96                     var scrollTop = $(this).scrollTop();
 97                     __startY = e.originalEvent.changedTouches[0].pageY - scrollTop;
 98                 });
 99                 $(document).on('touchmove', function (e) {
100                     if (__navAnimatelock) {
101                         return;
102                     }
103                     var scrollTop = $(this).scrollTop();
104                     __endY = e.originalEvent.changedTouches[0].pageY;
105                     __disY = __endY - __startY - scrollTop;
106                     if (scrollTop > 0) {
107                         return;
108                     }
109                     $("body").addClass("StaticBody");
110                     if (__disY > -40 && __disY < 140) {
111                         $('#TheStatusRefresh').css({
112                             top: -40 + __disY + 'px',
113                         });
114                     }
115                     else if (__disY >= 140) {
116                         $('#TheStatusRefresh').css({
117                             top: 140 - 40 + 'px',
118                         });
119                     }
120                     else {
121                         $('#TheStatusRefresh').css({
122                             top: -40 + 'px',
123                         });
124                     }
125                 });
126                 $(document).on('touchend', function (e) {
127                     if (__navAnimatelock) {
128                         return;
129                     }
130                     $("body").removeClass("StaticBody");
131                     var scrollTop = $(this).scrollTop();
132                     __endY = e.originalEvent.changedTouches[0].pageY;
133                     __disY = __endY - __startY - scrollTop;
134                     if (scrollTop > 0) {
135                         return;
136                     }
137                     if (__disY >= 70) {
138                         __navAnimatelock = true;
139                         $("#TheStatusRefresh").stop().animate({ top: "40px" }, "fast", function () {
140                             __navAnimatelock = true;
141                             $("#TheStatusRefresh img").addClass("route");
142                             options.onPullDownRefresh();
143                             __navAnimateGoTopTimeout = setTimeout(function () {
144                                 options.stopPullDownRefresh();
145                             }, 3000);
146                         });
147                     }
148                     else {
149                         __navAnimatelock = true;
150                         options.stopPullDownRefresh();
151                     }
152                 });
153             }
154         }

a：onPullDownRefresh

有個下拉動畫

 3、頁面

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <meta http-equiv="Cache-Control" content="no-transform">
 6     <meta http-equiv="Cache-Control" content="no-siteapp">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 8     <meta content="black" name="apple-mobile-web-app-status-bar-style">
 9     <meta content="yes" name="apple-mobile-web-app-capable">
10     <link href="page.css" rel="stylesheet" />
11 </head>
12 <body ng-controller="myCtrl" ng-app="myApp">
13     <div style="width:100px;height:2000px;" >
14         <p ng-bind="name" click="test" style="height:100px;width:100px;background-color:pink"></p>
15     </div>
16     <script src="jquery.js"></script>
17     <script src="angular.js"></script>
18     <script src="page.js"></script>
19 </body>
20 </html>

4、使用

 

Page({
            data: {
                name: '張三',
                age: 1
            },
            onLoad: function (options) {
                console.log("onLoad", options)
                this.myFun1();
            },
            onReady: function () {
                this.setData({
                    age: 222
                });
                console.log("onReady")
            },
            onReachBottom: function () {
                console.log("onReachBottom")
            },
            myFun1: function () {
                console.log('myFun1')
            },
            test: function (e) {
                this.stopPullDownRefresh();
            },
            onPullDownRefresh: function () {
                console.log(123)
            }
        })

a：繫結事件使用 click="方法名"，其他事件可自行擴充套件

b：設定屬性也跟微信一致，使用setData，直接給this.data.list賦值無效

c：onload方法的引數為當前頁面位址列引數轉成的物件

 

5、用到的css

 

 1 [click] {
 2             cursor: pointer;
 3         }
 4 
 5         .StaticBody {
 6             position: absolute;
 7             overflow: hidden;
 8         }
 9 
10         #TheStatusRefresh {
11             height: 40px;
12             width: 40px;
13             background: white;
14             position: fixed;
15             top: -40px;
16             border-radius: 100%;
17             left: calc(50% - 20px);
18             border: 1px solid #efefef;
19             padding: 9px;
20         }
21 
22             #TheStatusRefresh img {
23                 width: 20px;
24                 height: 20px;
25             }
26 
27                 #TheStatusRefresh img.route {
28                     -webkit-transition-property: -webkit-transform;
29                     -webkit-transition-duration: 0.8s;
30                     -moz-transition-property: -moz-transform;
31                     -moz-transition-duration: 0.8s;
32                     -webkit-animation: refresh_rotate 0.8s linear infinite;
33                     -moz-animation: refresh_rotate 0.8s linear infinite;
34                     -o-animation: refresh_rotate 0.8s linear infinite;
35                     animation: refresh_rotate 0.8s linear infinite;
36                 }
37 
38         @@-webkit-keyframes refresh_rotate {
39             from {
40                 -webkit-transform: rotate(0deg)
41             }
42 
43             to {
44                 -webkit-transform: rotate(360deg)
45             }
46         }
47 
48         @@-moz-keyframes refresh_rotate {
49             from {
50                 -moz-transform: rotate(0deg)
51             }
52 
53             to {
54                 -moz-transform: rotate(359deg)
55             }
56         }
57 
58         @@-o-keyframes refresh_rotate {
59             from {
60                 -o-transform: rotate(0deg)
61             }
62 
63             to {
64                 -o-transform: rotate(359deg)
65             }
66         }
67 
68         @@keyframes refresh_rotate {
69             from {
70                 transform: rotate(0deg)
71             }
72 
73             to {
74                 transform: rotate(359deg)
75             }
76         }

 僅此記錄一下

相關文章