Wersja 5.4 Framework7.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
var $$ = Dom7;

var app = new Framework7({
    root: '#app', // App root element

    id: 'com.fxteam.list', // App bundle ID
    name: 'Virtual List', // App name
    theme: 'auto', // Automatic theme detection
    // App root data
    data: function() {
        return {
            user: {
                firstName: 'John',
                lastName: 'Doe',
            },

        };
    },
    // App root methods
    methods: {
        helloWorld: function() {
            app.dialog.alert('Hello World!');
        },
    },
    // App routes
    routes: routes,


    // Input settings
    input: {
        scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
        scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
    },
    // Cordova Statusbar settings
    statusbar: {
        iosOverlaysWebView: true,
        androidOverlaysWebView: false,
    },
    on: {
        init: function() {
            var f7 = this;
            if (f7.device.cordova) {
                // Init cordova APIs (see cordova-app.js)
                cordovaApp.init(f7);
            }
        },
    },
});

$$(document).on('page:init', '.page[data-name="list"]', function(e) { //zdarzenie otwarcia strony z wirtualną listą

    axios
        .get('http://localhost/data') //api url
        .then(response => {
            console.log(response.data);
            var virtualList = app.virtualList.create({
                // List Element
                el: '.virtual-list',
                // Pass array with items
                items: response.data, //JSON z api
                // Custom search function for searchbar
                searchAll: function(query, items) {
                    var found = [];
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
                    }
                    return found; //return array with mathced indexes
                },
                // List item Template7 template
                itemTemplate: '<li>' +
                    '<a href="#" class="item-link item-content">' +
                    '<div class="item-inner">' +
                    '<div class="item-title-row">' +
                    '<div class="item-title">{{title}}</div>' +
                    '</div>' +
                    '<div class="item-subtitle">{{subtitle}}</div>' +
                    '</div>' +
                    '</a>' +
                    '</li>',
                // Item height
                height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46),
            });
        });
});

Aby axios zadziałał należy dołączyć bibliotekę:

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Plik html z szablonem wirtualnej listy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<div class="page" data-name="list">
    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
            <div class="title">Virtual List</div>
            <div class="subnavbar">
                <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
                    <div class="searchbar-inner">
                        <div class="searchbar-input-wrap">
                            <input type="search" placeholder="Search" />
                            <i class="searchbar-icon"></i>
                            <span class="input-clear-button"></span>
                        </div>
                        <span class="searchbar-disable-button if-not-aurora">Cancel</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="searchbar-backdrop"></div>
    <div class="page-content">
        <div class="list simple-list searchbar-not-found">
            <ul>
                <li>Nothing found</li>
            </ul>
        </div>
        <div class="list virtual-list media-list searchbar-found"></div>
    </div>
</div>
</template>

Przykładowe api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
header("Access-Control-Allow-Origin: *");
$json = array(
    array(
        "title" => "FXTEAM",
        "subtitle" => "test"
    ),
    array(
        "title" => "wpis drugi",
        "subtitle" => "2"
    ),
    array(
        "title" => "3",
        "subtitle" => "TeamPelikan"
    ),
    array(
        "title" => "wpis 4",
        "subtitle" => "test 4"
    ),
    array(
        "title" => "FXTEAM",
        "subtitle" => "test 5"
    ),
);

echo json_encode($json);
?>
Cordova (phonegap), JavaScript

Tagged in:

, ,