list-view 组件怎么结束下拉刷新？？？文档没有相关参数说明

Lovejingjing · *发表于 2020-11-17 11:57:12*

用了list-view , 想用下拉刷新，却发现不知道怎么结束下拉刷新状态，文档也没有说明，翻了官方例子，下拉刷新都是用的 refresh组件，求解！！！！

技术咨询-F · 回复于2020-11-17 16:04:32

state string 否设置组件当前状态。取值范围：normal、dragging、refreshing。

设置属性值

Lovejingjing · 回复于2020-11-17 17:21:38

技术支持-F 发表于 2020-11-17 16:04
state string 否设置组件当前状态。取值范围：normal、dragging、refreshing。

设置属性值 ...

list-view 文档上没有这个属性啊

Lovejingjing · 回复于2020-11-17 17:24:25

Lovejingjing 发表于 2020-11-17 17:21
list-view 文档上没有这个属性啊

<template name='tpl'>
<view class="page">
<Navbar title="首页"></Navbar>
<list-view id="listView" class="main" state={this.refresherState} refresher-enabled enable-back-to-top onrefresherrefresh={this.onrefresher} onscrolltolower={this.onscrolltolower}>
<cell onclick={this.itemClick}>
<text class="title">{item.title}</text>
<text class="subtitle">{item.subtitle}</text>
</cell>
<list-footer class="footer">
<text>加载中...</text>
</list-footer>
</list-view>
</view>
</template>
<script>
import Navbar from "../../components/navbar.stml";
export default {
name: "tpl",
apiready() {
//like created
// var vConsole = new VConsole();
},
data() {
return {
refresherState: 'normal',
};
},
methods: {
apiready() {
this.initData(false);
},
initData(loadMore) {
var that = this;
var skip = that.dataList ? that.dataList.length : 0;
var dataList = [];
for (var i = 0; i < 20; i++) {
dataList[i] = {
title: "项目" + (i + skip),
subtitle: "这里是子标题"
};
}
var listView = document.getElementById("listView");
if (loadMore) {
that.dataList = that.dataList.concat(dataList);
listView.insert({
data: dataList
});
} else {
that.dataList = dataList;
listView.load({
data: dataList
});
}
},
onscrolltolower() {
this.initData(true);
},
onrefresher(e) {
setTimeout(() => {
this.refresherState = "normal"
}, 1000)
},
itemClick(e) {
api.openWin({
name: 'demo',
url: '../demo/demo.stml',
avm: true,
})
// api.alert({
// msg: "当前项索引：" + e.target.index
// });
}
}
};
</script>
<style>
.page {
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
input {
margin: 8px;
}
cell {
padding: 8px;
height: 60px;
border-bottom: 0.5px solid #ddd;
background-color: #fff;
}
cell:active {
background-color: #ddd;
}
.title {
font-weight: bold;
font-size: 18px;
color: #000;
}
.subtitle {
color: #333;
}
.footer {
justify-content: center;
align-items: center;
}
</style>

复制代码

技术咨询-F · 回复于2020-11-17 17:24:32

Lovejingjing 发表于 2020-11-17 17:21
list-view 文档上没有这个属性啊

refresh组件

Lovejingjing · 回复于2020-11-17 17:27:42

Lovejingjing 发表于 2020-11-17 17:24

这样不管用

Lovejingjing · 回复于2020-11-17 17:29:04

技术支持-F 发表于 2020-11-17 17:24
refresh组件

必须要把refresh组件放进去才可以么

技术咨询-Kenny · 回复于2020-11-17 17:37:29

refresher-triggered属性控制刷新状态。建议使用refresh组件自定义下拉刷新样式。

[开发工具] list-view 组件怎么结束下拉刷新？？？文档没有相关参数说明