|
|
@@ -1,38 +1,107 @@
|
|
|
<template>
|
|
|
<view class="pages">
|
|
|
- <u--image :showLoading="false" src="../static/img/typelist-bg.png" width="100%" mode="widthFix"></u--image>
|
|
|
- <view class="list-wrap u-flex u-flex-wrap u-row-between">
|
|
|
- <view class="item" @click="typeClick(item)" v-for="(item,index) in typelist" :key="item.id">
|
|
|
- <view class="name">{{item.name}}</view>
|
|
|
- <img class="img" :src="item.classifyLogo||'../static/img/type-default-ico.png'" alt="">
|
|
|
+ <u--image style="margin-bottom: 24rpx;" :showLoading="false" src="../static/img/typelist-bg.png" width="100%" mode="widthFix"></u--image>
|
|
|
+ <mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
|
|
+ <view class="list-wrap u-flex u-flex-wrap u-row-between">
|
|
|
+ <view class="item" @click="typeClick(item)" v-for="(item,index) in dataList" :key="item.id">
|
|
|
+ <view class="name ellipsis-1">{{item.name}}</view>
|
|
|
+ <img class="img" :src="item.classifyLogo||'../static/img/type-default-ico.png'" alt="">
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </mescroll-body>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ // 引入mescroll-mixins.js
|
|
|
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
export default {
|
|
|
+ mixins: [MescrollMixin], // 使用mixin
|
|
|
data() {
|
|
|
return {
|
|
|
- typelist:[]
|
|
|
+ downOption: {},
|
|
|
+ // 上拉加载的配置(可选, 绝大部分情况无需配置)
|
|
|
+ upOption: {
|
|
|
+ page: {
|
|
|
+ size: 10 // 每页数据的数量,默认10
|
|
|
+ },
|
|
|
+ noMoreSize: 3, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
|
|
|
+ empty: {
|
|
|
+ tip: '暂无相关学习资料'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ params:{
|
|
|
+ },
|
|
|
+ dataList:[]
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
- this.getclassify()
|
|
|
},
|
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- getclassify(){
|
|
|
- this.$u.api.getclassify().then(res=>{
|
|
|
- this.typelist = res.data.rows.map(item=>{
|
|
|
+ /*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
|
|
|
+ downCallback(){
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
+ /*上拉加载的回调*/
|
|
|
+ upCallback(page) {
|
|
|
+ let that = this;
|
|
|
+ // 此处可以继续请求其他接口
|
|
|
+ // if(page.num == 1){
|
|
|
+ // // 请求其他接口...
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if(!this.params.classifyId){
|
|
|
+ // this.getclassify();
|
|
|
+ // return // 此处return,先获取xx
|
|
|
+ // }
|
|
|
+
|
|
|
+ let pageNum = page.num; // 页码, 默认从1开始
|
|
|
+ let pageSize = page.size; // 页长, 默认每页10条
|
|
|
+ let params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});
|
|
|
+ if(params.title){
|
|
|
+ params.classifyId = '';
|
|
|
+ this.showTabs = false;
|
|
|
+ }else{
|
|
|
+ this.showTabs = true;
|
|
|
+ }
|
|
|
+ // console.log('this.params',this.params);
|
|
|
+ this.$u.api.getclassify(params).then(data => {
|
|
|
+ // console.log('data',JSON.parse(JSON.stringify(data)));
|
|
|
+ // 接口返回的当前页数据列表 (数组)
|
|
|
+ let curPageData = data.data.rows;
|
|
|
+ curPageData = curPageData.map(item=>{
|
|
|
return {name:item.classifyName,id:item.id,classifyLogo:item.classifyLogo}
|
|
|
});
|
|
|
- // console.log('res',res.data);
|
|
|
- }).catch(err=>{
|
|
|
- console.log('getclassify',err);
|
|
|
- })
|
|
|
+ // console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
|
|
|
+ // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
+ let curPageLen = curPageData.length;
|
|
|
+ // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
+ // let totalPage = data.data.data.totalPage;
|
|
|
+ // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
+ let totalSize = data.data.total;
|
|
|
+ // 接口返回的是否有下一页 (true/false)
|
|
|
+ // let hasNext = data.xxx;
|
|
|
+ // console.log('totalPage',totalPage,'curPageLen',curPageLen);
|
|
|
+ //设置列表数据
|
|
|
+ if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
|
|
|
+ this.dataList = this.dataList.concat(curPageData); //追加新数据
|
|
|
+ // 请求成功,隐藏加载状态
|
|
|
+ //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
+ // this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
+ //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
|
|
+ this.mescroll.endBySize(curPageLen, totalSize);
|
|
|
+ }).catch(err => {
|
|
|
+ this.mescroll.endErr()
|
|
|
+ console.log(err)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
|
|
|
+ reloadList() {
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
},
|
|
|
typeClick(item){
|
|
|
console.log('typeClick',item);
|
