用checkbox-group和list-view制做购物车页面,加入checkbox-group后不能上拉分页,去掉正常
<template>
<checkbox-group name="" @change="testChange">
<list-view style="flex: 1;background-color: #ffffff;" @scrolltolower="loadData">
<template v-for="(item, index) in dataList" :key="index">
<list-item :type="index" style="flex-direction: row; margin-top: 10px; padding: 10px; height: 100px;">
<checkbox :value="String(item.plugin_id)" />
<image :src="item.plugin_img_link" style="width: 120px;"></image>
<text style="flex: 1;">{{item.plugin_name.substring(0,10)}}</text>
</list-item>
<list-item key="loading" v-if="index==dataList.length-1">
<text style="padding: 10px; text-align: center; background-color: #f8f8f8; margin-bottom: 1px;">{{loadingText}}</text>
</list-item>
</template>
</list-view>
</checkbox-group>
</template>
<script>
type Data = {
plugin_id : number;
plugin_name : string;
plugin_img_link : string;
plugin_intro : string;
is_paid : number;
collection_count : number;
support_count : number;
buy_count : number;
download_count : number;
score : number;
rater_count : number;
tags : string[];
category_level1_name : string;
category_level2_name : string;
update_date : string;
author_avatar_link : string;
author_name : string;
}
type IRootType = {
code : number;
desc : string;
data : Data[];
}
export default {
data() {
return {
dataList: [] as Data[],
loading: false,
isEnded: false,
loadingError: '',
$currentPage: 1
}
},
computed: {
loadingText() : string {
if (this.loading) {
return "加载中..."
} else if (this.isEnded) {
return "没有更多了"
} else if (this.loadingError.length > 0) {
return this.loadingError
} else {
return ""
}
}
},
onLoad() {
this.loadData()
},
methods: {
testChange: function (e : UniCheckboxGroupChangeEvent) {
console.log(e.detail.value);
},
loadData() {
if (this.loading || this.isEnded) {
return
}
this.loading = true
uni.request<IRootType>({
url: "https://ext.dcloud.net.cn/plugin/uniappx-plugin-list",
data: {
page: this.$currentPage, //当前页码
page_size: 10 //每页列表项目数量
},
success: (res) => {
const responseData = res.data
if (responseData == null) {
return
}
//...是展开运算符,本句用于把联网获取的数组合并到data数组里。当第一次执行时,dataList为空,push进去了第一页的数据,后续页面也同理
this.dataList.push(...responseData.data)
if (responseData.data.length == 0) {
this.isEnded = true
} else {
this.$currentPage++
}
},
fail: (err) => {
this.loadingError = err.errMsg
},
complete: () => {
this.loading = false
}
})
},
}
}
</script>
1 个回复
DCloud_heavensoft
哪个平台?最好是在hx帮助菜单里报bug