简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

用ionic实现无限轮播与点击跳转

一个新手
Lepaskan： 2017-09-19 10:39:06
asal
1556 orang telah melayarinya

第一页面

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../lib/css/ionic.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ionic']);        
        app.config(function($stateProvider,$urlRouterProvider) {/*$urlRouterProvider*/            
        $stateProvider
                .state('home', {                   
                url: '/',                   
                 templateUrl: 'home.html'                
                 })
                .state('tiaozhuan', {                    
                url: '/tiaozhuan',                   
                templateUrl: 'tiaozhuan.html'                
                })
            $urlRouterProvider.otherwise("/")
        });    </script></head><body ng-app="myApp"><ion-nav-view animation="slide-left-right">
    <!-- 中间内容 --></ion-nav-view></body></html>
Salin selepas log masuk

第二页面<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../lib/css/ionic.min.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <style>
        img{            
        width: 100%;            
        height: auto;
        }
        .btn{            
        background: green;            
        position: fixed;            
        left: 40%;            
        bottom: 100px;
        }    
    </style>
    <script>
        var my=angular.module("my",["ionic"]);    
        </script></head><body ng-app="my">
        <!-- ion-view的标题会在导航栏显示 -->
        <ion-view title="Tiaozhuan">
    <ion-content>
        <ion-nav-view animation="slide-left-right">
            <ion-slide-box auto-play="true" does-continue="true" slide-interval="1500">
                <ion-slide>
                    <p class="box blue"><img src="../img/start_page-01.jpg" height="1334" width="750"/></p>
                </ion-slide>
                <ion-slide>
                    <p class="box yellow"><img src="../img/start_page-02.jpg" height="1334" width="750"/></p>
                </ion-slide>
                <ion-slide on-slide-changed="slideHasChanged(index)">
                    <p class="box pink">
                        <img src="../img/start_page-03.jpg" height="1334" width="750"/>
                        <button class="button button-balanced btn" ui-sref="tiaozhuan">点击进入</button>
                    </p>
                </ion-slide>
            </ion-slide-box>
        </ion-nav-view>
    </ion-content></ion-view>
    </body>
    </html>
    
    
第三页面
<!-- ion-view的标题会在导航栏显示 --><ion-view title="Tiaozhuan">
 <ion-content>
 <p>asdas</p>
 </ion-content></ion-view>
Salin selepas log masuk

Atas ialah kandungan terperinci 用ionic实现无限轮播与点击跳转. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
ionic 实现 点击
sumber：php.cn
Artikel sebelumnya：关于使用NPM Artikel seterusnya：JS中常用的时间方法有哪些
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1814
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
1966
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1662
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1566
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1593
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！