loadmore上拉下拉刷新(上拉加载要在手机预览)
<mt-loadmore
:top-method="loadTop"//下拉时触发
:bottom-method="loadBottom"//上拉时触发
:bottom-all-loaded="allLoaded"
ref="loadmore"
>
<ul>
<li v-for="(item,index) in list" :key="index">{{ item }}
</li>
</ul>
</mt-loadmore>
allLoaded
: true,
methods
: {
loadTop() {
Toast("Upload Complete");
this.$refs
.loadmore
.onTopLoaded();
},
loadBottom() {
setTimeout(() => {
this.$refs
.loadmore
.onBottomLoaded();
this.allLoaded
= true
}, 1000);
}
},
InfiniteScroll滚动加载更多
<div class="container">
<ul
v-infinite-scroll="loadMore"
:infinite-scroll-disabled="loading"
:nfinite-scroll-distance="10"
>
<li v-for="(item,index) in list" :key="index">{{ item }}
</li>
</ul>
<div>加载中...
</div>
</div>
list
: [
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18
],
loading
:false
loadMore() {
this.loading
= true;
setTimeout(() => {
let last
= this.list
[this.list
.length
- 1];
for (let i
= 1; i
<= 10; i
++) {
this.list
.push(last
+ i
);
}
this.loading
= false;
}, 500);
}
.container {
height: 200px
;
background: green
;
overflow: scroll
;
}
Actionsheet底部菜单
<span @click="sheetVisible=true">点击
</span>
<mt-actionsheet :actions="actions" v-model="sheetVisible" :closeOnClickModal="modal"></mt-actionsheet>
actions
:[{name
:'ma',method
:function(){console
.log('ma')}},{name
:'lin',method
:function(){console
.log('lin')}},{name
:'shu',method
:function(){console
.log('shu')}}],
sheetVisible
:false,
modal
:true
Popup弹框
<span @click="popupVisible = true">点击
</span>
<mt-popup
v-model="popupVisible"
popup-transition="popup-fade"
:modal="modal"
position="right"
:closeOnClickModal="false"
>
<div style="height:100vh;width:100vw;">
我是popup的内容
<span @click="popupVisible=false">关闭
</span>
</div>
</mt-popup>
popupVisible
: false,
modal
: true
Swipe, SwipeItem轮播图
<mt-swipe :auto="100" class="swiper" :speed="100" :continuous="false">
<mt-swipe-item>1
</mt-swipe-item>
<mt-swipe-item>2
</mt-swipe-item>
<mt-swipe-item>3
</mt-swipe-item>
</mt-swipe>
Lazyload懒加载
<ul>
<li v-for="(item,index) in list" :key="index">
<img v-lazy="item" />
</li>
</ul>
list
:[require('@/assets/logo.png')]
Picker两级地址选择
<mt-picker :slots="slots" @change="onValuesChange" :showToolbar="true">
<div>取消
</div>
<div @click="confirm">确定
</div>
</mt-picker>
<input type="text" :value="realArr" placeholder="请选择地址"/>
slots
: [
{
flex
: 1,
values
: [],
className
: "slot1",
textAlign
: "right"
},
{
divider
: true,
content
: "-",
className
: "slot2"
},
{
flex
: 1,
values
: [],
className
: "slot3",
textAlign
: "left"
}
],
tempArr
: [],
realArr
:null
confirm() {
this.realArr
= this.tempArr
[0] + " " + this.tempArr
[1];
},
onValuesChange(picker
, values
) {
if (picker
.getSlotValue(0) != this.tempArr
[0]) {
this.$http
.post("api/wx/user/address", {
type
: 3,
where
: "广东省",
where2
: picker
.getSlotValue(0)
})
.then(res
=> {
this.slots
[2].values
= res
.data
;
});
this.tempArr
[0] = picker
.getSlotValue(0);
} else if (picker
.getSlotValue(1) != this.tempArr
[1]) {
this.tempArr
[1] = picker
.getSlotValue(1);
console
.log(this.tempArr
);
}
},
getData() {
this.$http
.post("api/wx/user/address", {
type
: 2,
where
: "广东省"
})
.then(res
=> {
if (res
.code
== 1) {
this.slots
[0].values
= res
.data
;
this.tempArr
[0] = res
.data
[0];
return this.$http
.post("api/wx/user/address", {
type
: 3,
where
: "广东省",
where2
: res
.data
[0]
});
}
})
.then(res
=> {
this.slots
[2].values
= res
.data
;
this.tempArr
[1] = res
.data
[0];
});
}
.picker-toolbar {
display: flex
;
justify-content: space-between
;
}
Picker三级地址选择
<mt-picker :slots="slots" @change="onValuesChange" :showToolbar="true">
<div>取消
</div>
<div @click="confirm">确定
</div>
</mt-picker>
<input type="text" :value="realArr" placeholder="请选择地址"/>
test2
: "",
slots
: [
{
flex
: 1,
values
: [],
className
: "slot1",
textAlign
: "center"
},
{
divider
: true,
content
: "-",
className
: "slot2"
},
{
flex
: 1,
values
: [],
className
: "slot3",
textAlign
: "center"
},
{
divider
: true,
content
: "-",
className
: "slot4"
},
{
flex
: 1,
values
: [],
className
: "slot5",
textAlign
: "center"
}
],
tempArr
: [],
realArr
: null
confirm() {
this.realArr = this.tempArr[0] + " " + this.tempArr[1]+" "+this.tempArr[2];
},
onValuesChange(picker, values) {
if (picker.getSlotValue(0) != this.tempArr[0]) {//第一列滑动了，就获取第二列数据
this.tempArr[0] = picker.getSlotValue(0);
this.$http
.post("api/wx/user/address", {
type: 2,
where:this.tempArr[0]
})
.then(res => {
this.slots[2].values = res.data;
});
} else if (picker.getSlotValue(1) != this.tempArr[1]) {//第二列数据获取、赋值之后会执行这里
this.tempArr[1] = picker.getSlotValue(1);
this.$http
.post("api/wx/user/address", {
type:3,
where:this.tempArr[0],
where2:this.tempArr[1]
})
.then(res => {
this.slots[4].values = res.data;
});
}else if(picker.getSlotValue(2) != this.tempArr[2]){
this.tempArr[2] = picker.getSlotValue(2);
console.log(this.tempArr,'tttttt')
}
},
getData() {//初始化数据
this.$http
.post("api/wx/user/address", {
type: 1
})
.then(res => {
if (res.code == 1) {
this.slots[0].values = res.data;
this.tempArr[0] = res.data[0];
return this.$http.post("api/wx/user/address", {
type: 2,
where: this.tempArr[0]
});
}
})
.then(res => {
this.slots[2].values = res.data;
this.tempArr[1] = res.data[0];//默认选中，在改变的时候跟这个作比较就可以知道哪一列发生变化
return this.$http.post('api/wx/user/address',{
type:3,
where:this.tempArr[0],
where2:this.tempArr[1]
})
}).then(res=>{
this.slots[4].values = res.data
this.tempArr[2] = res.data[0]
})
}
Tabbar
<mt-tabbar v-model="selected">
<mt-tab-item id="tab1">
<img slot="icon" src="@/assets/logo.png" />
tab1
</mt-tab-item>
<mt-tab-item id="tab2">
<img slot="icon" src="@/assets/logo.png" />
tab2
</mt-tab-item>
<mt-tab-item id="tab3">
<img slot="icon" src="@/assets/logo.png" />
tab3
</mt-tab-item>
<mt-tab-item id="tab4">
<img slot="icon" src="@/assets/logo.png" />
tab4
</mt-tab-item>
</mt-tabbar>
selected
: "tab1"
Cell Swipe
左滑删除
Field
Search
<mt-search v-model="value" @input="change">
<mt-cell v-for="(item,index) in result" :show="true" :title="item.title" :value="item.value" :key="index"></mt-cell>
</mt-search>
change(e
){
this.value
= e
}
