mintUI的使用:
1.找官网
2.安装 npm install mint-ui -S -S表示 --save
3.引入mint Ui的css 和 插件
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'
4.看文档直接使用。
在mintUi组件上面执行事件的写法
@click.native
<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
1.使用action-sheet
官方文档不详细的控件,去github下载源码,进行使用,改进,然后集成
下载源码:
https://github.com/ElemeFE/mint-ui
这个目录下的就是示例代码:
https://github.com/ElemeFE/mint-ui/tree/master/example
举例使用:
<template>
<div>
<div>sheet组件</div>
<br>
<!--<action-sheet></action-sheet>-->
<br>
<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
</div>
</template>
<script>
//import actionSheet from './action-sheet'
export default {
name: "ActionSheetDemo",
//components: {'actionSheet': actionSheet},
data() {
return {
sheetVisible: false,
actions: [],
}
},
mounted() {
this.actions = [{
name: '拍照',
method: this.takePhoto
}, {
name: '从相册中选择',
method: this.openAlbum
}];
this.actions2 = [{
name: '确定'
}, {
name: '返回上一步',
method: this.goBack
}];
}
}
</script>
<style scoped>
</style>
2.使用infinite-scroll上拉分页加载更多
加载本地信息+使用axios加载网络信息
<template>
<div>
<ul
v-infinite-scroll="loadMoreNetWork"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10" class="list">
<!--<li v-for="item in list">{{ item }}</li>-->
<li v-for="item in list">{{ item.title }}</li>
<div>loading....</div>
</ul>
</div>
</template>
<script>
export default {
name: "LoadMoreDemo",
data() {
return {
list: [],
loading: false,
j: 0,
page: 1,
setTimeoutId: 0,
}
},
methods: {
//加载本地数据
loadMore() {
console.log('loadMore');
this.loading = true;
this.setTimeoutId = setTimeout(() => {
for (let i = 1; i <= 20; i++, this.j++) {
this.list.push('第' + this.j + "条");
}
this.loading = false;
}, 1200);
},
loadMoreNetWork() {
this.requestData();
},
requestData() {
this.loading = true;
/*请求数据的开关*/
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
this.$axios.get(api).then((response) => {
console.log(response.data)
this.list = this.list.concat(response.data.result);
++this.page;
/*每次请求完成page++*/
//判断最后一页是否有数据
if (response.data.result.length < 20) {
this.loading = true;
/*终止请求*/
} else {
this.loading = false;
/*继续请求*/
}
})
.catch((err) => {
console.log(err)
});
},
},
mounted() {
// this.requestData();
},
beforeDestroy() {
// clearTimeout(this.setTimeoutId);
},
}
</script>
<style lang="scss" scoped>
.list {
li {
height: 50px;
line-height: 30px;
/*background: red;*/
}
}
</style>