H5在瀏覽器端使用mint-ui框架，直接通過cdn引入
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
線上demo：https://my.weblf.cn/alone_page/pages/mint-ui.html
此demo包含常用的一些功能如：信息提示、彈窗、詢問框、等待框、操作表、彈出框、時間選擇器，上拉加載、下拉刷新、圖片懶加載等功能。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,target-densitydpi=400" >
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>mint-ui在瀏覽器使用</title>
<link rel="stylesheet" href="statics/css/reset.css" id='reset'>
<link rel="stylesheet/less" type="text/css" href="statics/css/test.less?ver=1">
<script type="text/javascript" src="statics/js/public.js?ver=2" id='public'></script>
<script type="text/javascript" src="statics/js/less2.5.3.min.js" id='less'></script>
<script type="text/javascript" src="statics/js/vue2.6.11.js"></script>
<!-- mint-ui -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- 頭部 -->
<div class="now_page_head" ref="now_page_head" v-if="!isWeiXin">
標題
<img src="./statics/images/back.png" class="back"/>
</div>
<!-- 頁面的主要內容 -->
<section class="content">
<div class="items">
<mt-loadmore
:auto-fill="false"
:bottom-method="loadBottom"
:bottom-all-loaded="bottomAllLoaded"
:top-method="loadTop"
:top-all-loaded="topAllLoaded"
ref="loadmore"
:bottom-distance="70"
@bottom-status-change="bottomStatusChange"
>
<div class="cont">
<button @click="f1()">提示信息</button>
<button @click="f2()">彈框</button>
<button @click="f3()">詢問框</button>
<button @click="f4()">等待框</button>
<button @click="sheetVisible=true">操作表</button>
<button @click="popupVisible=true">彈出框</button>
<button @click="openPicker()" >時間選擇器</button>
<h6 style="overflow: hidden;clear: both;"></h6>
<div class="item" v-for="(row,index) in all_list" :key="index">
<img v-lazy="'https://my.weblf.cn/alone_page/statics/images/timg.jpg'" alt="" srcset="">
填充內容{{index+1}}
</div>
</div>
<div slot="bottom" class="mint-loadmore-bottom">
<span v-if="bottomAllLoaded">沒有更多了</span>
<section v-else>
<span v-show="bottomStatus === 'pull' && !bottomAllLoaded" :class="{ 'rotate': topStatus === 'drop' }">上拉加載更多</span>
<span v-show="bottomStatus === 'loading'">加載中...</span>
<span v-show="bottomStatus === 'drop' && !bottomAllLoaded">釋放加載更多</span>
</section>
</div>
</mt-loadmore>
</div>
</section>
<!-- 操作表 -->
<mt-actionsheet
:actions="actions"
:close-on-click-modal="false"
v-model="sheetVisible">
</mt-actionsheet>
<!-- 彈出框 -->
<!-- 底部彈窗 -->
<mt-popup
v-model="popupVisible"
popup-transition="popup-fade"
position='bottom'
modal=true
>
<div class="select_list">
<div class="odiv" @click="pop('刪除')">刪除</div>
<div class="odiv" @click="pop('分享')">分享</div>
</div>
</mt-popup>
<!-- 時間選擇器 -->
<mt-datetime-picker
ref="picker"
v-model="pickerVisible"
@confirm="handleConfirm"
:start-date="new Date('2010/01/01 00:00:00')"
:end-date="new Date('2030/12/31 00:00:00')"
type="date"
year-format="{value}年"
month-format="{value}月"
date-format="{value}日"
>
</mt-datetime-picker>
<!-- 頁面結束 -->
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
showSpinner: false,
isWeiXin: window.TS_WEB.isWeiXin,
isApps: window.TS_WEB.isApp,
rangeValue:1, //滑塊
//操作表
actions:[
{
name:'拍照',
method:this.action1
},
{
name:'從相冊選擇',
method:this.action1
}
],
sheetVisible:false,
//彈出框
popupVisible:false,
//時間選擇器
pickerVisible:false,
//下拉刷新
bottomAllLoaded: false,
bottomStatus: '',
topAllLoaded: false,
topStatus: '',
loadType:'',
cur_page:1,
all_list:10 //總條數，測試用
},
components: {},
computed: {},
methods: {
//提示框組件
f1(){
this.$toast('提示信息');
},
//彈框
f2(){
this.$messagebox.alert('修改成功')
},
//詢問框
f3(){
this.$messagebox.confirm('確定刪除此信息?').then(action => {
this.$toast('刪除成功');
}).catch(action => {
this.$toast('刪除失敗');
})
},
//等待，加載框
f4(){
this.$indicator.open('請等待...')
setTimeout(()=>{
this.$indicator.close();
},2000)
},
//操作表
action1: function(){
console.log("打開照相機")
},
//彈出框
pop(n){
this.$toast(n+'成功');
this.popupVisible=false
},
//打開時間選擇器
openPicker() {
this.$refs.picker.open();
},
//選擇時間選擇器
handleConfirm(val){
let d=new Date(val)
let time=d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日'
this.$toast('選擇的時間爲:'+time);
},
//獲取頁面基本數據
getData () {
if(this.loadType == 'bot'){
this.cur_page++
this.all_list=this.all_list+10
}else{
this.cur_page = 1;
this.all_list=10
}
console.log('當前頁碼：'+this.cur_page)
},
//下拉刷新
loadBottom () {
this.loadType = 'bot';
this.getData();
setTimeout(() => {
this.$refs.loadmore.onBottomLoaded();
}, 1000);
},
loadTop () {
this.loadType = 'top';
this.getData();
setTimeout(() => {
this.$refs.loadmore.onTopLoaded();
}, 1000);
},
bottomStatusChange (status) {
this.bottomStatus = status;
},
},
created() {
document.title='mint-ui在瀏覽器使用'
// setTimeout(()=>{
// document.getElementById("reset").href="statics/css/reset.css?ver="+Math.random();
// },3000)
}
})
</script>
<style>
button{
float: left;
margin: 5px;
}
/* .content{
overflow: hidden !important;
}
.items{
width: 100%;
height: 100%;
overflow: scroll;;
} */
.item{
line-height: 100px;
text-align: center;
overflow: hidden;
}
.item img{
display: block;
width: 100%;
}
.mint-loadmore-content .mint-loadmore-top {
height: 48px;
line-height: 48px;
}
/* 彈出框 */
.mint-popup.mint-popup-bottom{
width: 100%;
}
.select_list{
padding: 1rem 0;
}
.select_list .odiv{
font-size: 1.2rem;
line-height: 3rem;
text-align: center;
border-bottom: 1px solid #f5f5f5;
}
</style>
</html>