MUI顶部选项卡的用法
前 言
MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等
最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。
1主页代码
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.d1{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<p class="d1">我是p1,下面是插入的子页面</p> <!--我们将在这个p下边插入子页面-->
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
subpages:[{ //下边是初始化，然后这个页面显示我们将插入的页面
url:"tab-top-webview-main.html",
id:"tab-top-webview-main.html",
styles:{
top:"50px",
bottom:"0px"
}
}]
}) </script></html>2子页代码
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<p class="mui-content">
<p id="slider" class="mui-slider mui-fullscreen">
<p id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<p class="mui-scroll">
<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
推荐 </a>
<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
热点 </a>
</p>
</p>
</p>
</p>
<script src="js/mui.min.js"></script>
<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
mui.plusReady(function() {
var group = new webviewGroup("tab-top-webview-main.html", {
items: [{
id: "tab-top-subpage-1.html", //这是子页1的路径
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html", //这是子页2的路径
url: "tab-top-subpage-2.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
}
});
mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
var wid = this.getAttribute("data-wid");
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close("auto");
} </script>
</body></html>3代码解释
var group = new webviewGroup("tab-top-webview-main.html", {
items: [{
id: "tab-top-subpage-1.html", //这是子页1的路径
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html", //这是子页2的路径
url: "tab-top-subpage-2.html",
extras: {}
}]
})1、子页选项卡的超链接a的data-wid=""属性需要设置为对应子页选项卡路径。
<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
推荐</a>2、这里，new webviewGroup("tab-top-webview-main.html",{}) 第一个参数需要传入一个页面的id。需要注意的是，这个页面id 就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面
new webviewGroup("tab-top-webview-main.html", {} 3、 items数组中传入的是子页对应选项卡该导入的子页面的id，有几个子页就添加几个子页，中间用逗号分隔
Atas ialah kandungan terperinci MUI顶部选项卡的用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana untuk menetapkan fokus kamera lalai pada iPhone 15 Pro
Sep 22, 2023 pm 11:53 PM
Pada model iPhone 15 Pro, Apple telah memperkenalkan tiga pilihan jarak fokus untuk merakam dengan kamera utama. Artikel ini menerangkan pilihan ini dan cara menetapkan jarak fokus lalai pilihan anda untuk mengambil foto. Untuk memanfaatkan sepenuhnya sistem kamera yang dipertingkatkan pada iPhone 15 Pro dan iPhone 15 Pro Max, Apple telah menambah tiga pilihan jarak fokus berbeza pada zum optik kamera utama. Sebagai tambahan kepada mod lalai 1x (24mm), Apple telah menambah tetapan 1.2x (28mm) dan 1.5x (35mm). Pengguna iPhone 15 Pro boleh memilih daripada jarak fokus ini apabila mengambil foto dengan hanya mengetik butang 1x dalam apl Kamera. Walau bagaimanapun, disebabkan oleh sebab teknikal, tumpuan ini
Cara menggunakan petikan blok dalam Apple Notes
Oct 12, 2023 pm 11:49 PM
Dalam iOS 17 dan macOS Sonoma, Apple telah menambah pilihan pemformatan baharu untuk Apple Notes, termasuk petikan blok dan gaya Monostyle baharu. Inilah cara untuk menggunakannya. Dengan pilihan pemformatan tambahan dalam Apple Notes, anda kini boleh menambah petikan blok pada nota anda. Format petikan blok memudahkan untuk mengimbangi bahagian penulisan secara visual menggunakan bar petikan di sebelah kiri teks. Hanya ketik/klik butang format "Aa" dan pilih pilihan petikan blok sebelum menaip atau apabila anda berada di baris yang anda ingin tukar kepada petikan blok. Pilihan ini digunakan pada semua jenis teks, pilihan gaya dan senarai, termasuk senarai semak. Dalam menu Format yang sama anda boleh mencari pilihan Gaya Tunggal baharu. Ini ialah semakan bagi "lebar sama" sebelumnya
Betulkan: Pilihan dok dalam bar tugas dikelabukan pada Windows 11
Sep 15, 2023 pm 05:35 PM
Bar bahasa ialah ciri penting dalam Windows yang membolehkan pengguna menukar input dengan cepat dan bukannya menggunakan pintasan papan kekunci +. Tetapi dalam beberapa kes, pilihan dok dalam bar tugas kelihatan kelabu dalam Windows 11. Masalah dengan WindowsSpacebar ini nampaknya sangat biasa dan tiada penyelesaian. Kami cuba menukar tetapan bahasa dan mengkonfigurasi semula kandungan, tetapi tidak berjaya. Walaupun akhirnya kami berjaya mencari punca dan penyelesaiannya. Mengapa saya tidak boleh dok bar bahasa dalam bar tugas dalam Windows 11? Anda hanya memasang satu bahasa dan bar bahasa hanya berfungsi dengan berbilang bahasa. Bahasa tidak dipasang dengan betul. Pepijat dalam Windows 11. Fail sistem atau profil pengguna yang rosak. Jika di W
Menganalisis penggunaan dan klasifikasi ulasan JSP
Feb 01, 2024 am 08:01 AM
Klasifikasi dan Analisis Penggunaan Komen JSP Komen JSP terbahagi kepada dua jenis: komen satu baris: berakhir dengan, hanya satu baris kod boleh diulas. Komen berbilang baris: bermula dengan /* dan berakhir dengan */, anda boleh mengulas berbilang baris kod. Contoh ulasan satu baris Contoh ulasan berbilang baris/**Ini ialah ulasan berbilang baris*Boleh mengulas pada berbilang baris kod*/Penggunaan ulasan JSP Komen JSP boleh digunakan untuk mengulas kod JSP agar lebih mudah dibaca
Cara menangani kotak semak dan radiobutton dalam bentuk PHP
Aug 11, 2023 am 08:39 AM
Cara mengendalikan kotak semak dan butang radio dalam bentuk PHP Dalam pembangunan web, borang adalah salah satu cara utama interaksi data antara aplikasi dan pengguna. Dalam borang, kadangkala kita perlu menggunakan kotak semak dan butang radio untuk memilih pilihan. Artikel ini akan menerangkan cara mengendalikan kotak pilihan dan butang radio dalam PHP. 1. Pemprosesan kotak semak Dalam HTML, kita boleh menggunakan <inputtype="checkbox&qu
Bagaimana untuk membuka pilihan Internet dalam pelayar Edge
Jan 03, 2024 pm 12:49 PM
Rakan-rakan yang menggunakan pelayar IE pasti akan menggunakan pilihan Internet untuk menyediakannya, tetapi mereka tidak boleh ditemui pada pelayar tepi, jadi bagaimana untuk membukanya? Sebenarnya, anda hanya perlu membuka pelayar IE dalam pelayar tepi untuk menyediakannya. Di manakah pilihan internet pelayar tepi: 1. Masukkan pelayar tepi dan klik tiga titik di penjuru kanan sebelah atas. 2. Pilih "Lagi Alat" dalam bar tugas. 3. Pilih "Buka dengan Internet Explorer" dalam antara muka baharu. 4. Klik "Tetapan Gear" di penjuru kanan sebelah atas pelayar baharu. 5. Anda boleh mencari "Internet Options" dalam bar tugas. 6. Klik untuk memasukkan tetapan.
Penggunaan fungsi WPSdatedif
Feb 20, 2024 pm 10:27 PM
WPS ialah suite perisian pejabat yang biasa digunakan, dan fungsi jadual WPS digunakan secara meluas untuk pemprosesan dan pengiraan data. Dalam jadual WPS, terdapat fungsi yang sangat berguna, fungsi DATEDIF, yang digunakan untuk mengira perbezaan masa antara dua tarikh. Fungsi DATEDIF ialah singkatan daripada perkataan Inggeris DateDifference Sintaksnya adalah seperti berikut: DATEDIF(start_date,end_date,unit) dengan start_date mewakili tarikh mula.
Cara menggunakan fungsi keluar dalam bahasa C dengan betul
Feb 18, 2024 pm 03:40 PM
Cara menggunakan fungsi keluar dalam bahasa C memerlukan contoh kod khusus Dalam bahasa C, kita selalunya perlu menamatkan pelaksanaan program pada awal program, atau keluar dari program dalam keadaan tertentu. Bahasa C menyediakan fungsi exit() untuk melaksanakan fungsi ini. Artikel ini akan memperkenalkan penggunaan fungsi exit() dan memberikan contoh kod yang sepadan. Fungsi exit() ialah fungsi perpustakaan standard dalam bahasa C dan disertakan dalam fail pengepala. Fungsinya adalah untuk menamatkan pelaksanaan program, dan boleh mengambil integer
