|
|
<template>
<list-view refresher-enabled = "true" refresher-triggered = {refresherTriggered} id="listView" class="main" enable-back-to-top onrefresherrefresh={this.onrefresherrefresh} onrefresherrestore={this.onrefresherrestore} onscrolltolower={this.onscrolltolower}>
<cell class="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>
</template>
<style>
.main {
width: 100%;
height: 100px;
}
.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>
<script>
import $ajax from '../components/ajax.js'
export default {
name: 'test',
data() {
return {
refresherTriggered: false,
}
},
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<5;i++) {
dataList = {
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() {
console.log(111)
this.initData(true);
},
onrefresherrefresh(){
console.log(333)
// var listView = document.getElementById('listView');
this.refresherTriggered = true
this.refresherTriggered = false
},
onrefresherrestore(){
console.log(456)
// this.refresherTriggered = false
},
itemClick(e) {
// api.alert({
// msg: '当前项索引：' + e.currentTarget.index
// });
var param={
name:'list',
url:'list.stml',
title:'打开',
}
$ajax.openWin(param);
}
}
}
</script>
这是代码 ，改动的地方 .main {
width: 100%;
height: 100px;
}
的height有100%改成100px，条数改成5，你运行看下 就能看到我说的效果
|
|
