vue使用vant的list组件使用
模板代码<van-listv-model="loading":finished="finished":finished-text="finishedText"@load="pullupLoadMore"><ulv-for="(item,id) in allHouseDetail":key="id"><li @click="chooseRoom(item.roomAdd
·
模板代码
<van-pull-refresh
v-model="refreshing"
@refresh="onRefresh"
>
<van-list
v-model="loading"
:finished="finished"
:finished-text="finishedText"
@load="pullupLoadMore"
:immediate-check="false"
:error.sync="error"
error-text="请求失败,点击重新加载"
>
<ul
v-for="(item,id) in allHouseDetail"
:key="id"
>
<li @click="chooseRoom(item.roomAddress,item)">{{ item.roomAddress }}</li>
</ul>
</van-list>
</van-pull-refresh>
js代码
data () {
return {
allHouseDetail: [], // 所有房屋数据
loading: false, // 是否处在加载状态
finished: false, // 是否完成加载
finishedText: '', // 加载完毕文本提示
page: 1, // 当前页码
page_size: 100, // 每页多少条
total: 0, // 总条数
error: false, // 错误提示
refreshing: false, // 下拉刷新
};
},
methods: {
getHouseDetail () {
this.communityId = JSON.parse(localStorage.getItem('areaDetail')).areaId
this.areaName = JSON.parse(localStorage.getItem('areaDetail')).areaName
this.$http({
method: 'post',
url: '你的请求路径',
data: {
communityId: this.communityId,
page: this.page,
limit: this.page_size
}
}).then(res => {
try {
if (res.returnCode == 10001) {
if (this.refreshing) { // 下拉刷新
this.allHouseDetail = [];
this.refreshing = false;
}
if (this.page == 1) {
this.loading = false
this.allHouseDetail = res.data
this.total = res.total;
} else {
this.loading = false
this.allHouseDetail = this.allHouseDetail.concat(res.data)
this.total = res.total;
}
if (res.data.length == 0) {
this.finished = true;
this.finishedText = '暂无数据';
} else if (res.data.length < this.page_size) {
this.finished = true;
this.finishedText = '没有更多啦';
}
} else {
Toast.fail(res.returnMsg);
}
} catch {
this.error = true;
}
})
},
pullupLoadMore () { // 上拉加载更多
this.page++;
this.getHouseDetail();
},
onRefresh () { // 下拉刷新
this.finished = false;
this.loading = true;
this.refreshing = true
this.page = 1
this.getHouseDetail();
},
}
遇到的问题
进入页面load事件就触发了
- 根据vant官方哪个提示,在模板中添加 :immediate-check=“false” 即可关闭初始化时改事件的触发
ps
今天才发现vant 的list组件 对常见的使用问题下面有提示、
好了总结完毕!有什么问题可以留言一起交流下。
更多推荐
已为社区贡献5条内容
所有评论(0)