mescroll-swiper-item.vue 子组件
<template>
<!--
swiper中的transfrom会使fixed失效,此时用height固定高度;
swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
-->
<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
<!-- top的高度等于悬浮菜单tabs的高度 -->
<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
<!-- 数据列表 -->
<good-list :list="goods"></good-list>
</mescroll-uni>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import {apiGoods} from "@/api/mock.js"
export default {
mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
data() {
return {
downOption:{
auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
},
upOption:{
auto:false, // 不自动加载
// page: {
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
// size: 10 // 每页数据的数量
// },
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: '去看看'
}
},
goods: [] //列表数据
}
},
props:{
i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
type: Array,
default(){
return []
}
},
height: [Number,String] // mescroll的高度
},
methods: {
/*下拉刷新的回调 */
downCallback() {
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
// loadSwiper();
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
this.mescroll.resetUpScroll()
},
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) {
//联网加载数据
let keyword = this.tabs[this.i].name
apiGoods(page.num, page.size, keyword).then(res=>{
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
this.mescroll.endSuccess(res.list.length);
//设置列表数据
if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
this.goods=this.goods.concat(res.list); //追加新数据
}).catch(()=>{
//联网失败, 结束加载
this.mescroll.endErr();
})
},
//点击空布局按钮的回调
emptyClick(){
uni.showToast({
title:'点击了按钮,具体逻辑自行实现'
})
}
}
}
</script>
父组件
<template>
<view>
<!--头部导航栏-->
<u-navbar id="navbar" :is-back="false" :background="{background:'#000000' }">
<view>
<u-tabs-swiper ref="uTabs" inactive-color="#FFFFFF" bg-color="#000000" :list="list"
:current="current" :font-size="28" @change="tabsChange" :is-scroll="false"
:active-color="vuex_theme_color">
</u-tabs-swiper>
</view>
</u-navbar>
<!--滑块部分-->
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
:style="{height:currentHeight+'px'}">
<swiper-item class="swiper-item" :key="0">
<!--index这个参数是必须要的-->
<!--ref="mescrollItem",如果要通过$refs操作，给ref最好设置一个不重复的。比如 ref="mescrollItem0"-->
<i-mescroll-swiper-item ref="mescrollItem" :height="mescrollHeight" :i="0" :index="0"></i-mescroll-swiper-item>
</swiper-item>
<swiper-item class="swiper-item" :key="1">
<i-mescroll-swiper-item ref="mescrollItem" :height="currentHeight" :i="1" :index="1"></i-mescroll-swiper-item>
</swiper-item>
<swiper-item class="swiper-item" :key="2">
<i-mescroll-swiper-item ref="mescrollItem" :height="currentHeight" :i="2" :index="2"></i-mescroll-swiper-item>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
name: '播报'
}, {
name: '取货中 (2)'
}, {
name: '送货中 (5)'
}],
current: 0,
swiperCurrent: 0,
currentHeight: 400,
mescrollHeight: 400
}
},
async onReady() {
//记录窗口高度等信息
const res = uni.getSystemInfoSync();
this.$u.vuex('vuex_statusBarHeight', res.statusBarHeight);
this.$u.vuex('vuex_windowHeight', res.windowHeight);
this.$u.vuex('vuex_safeAreaHeight', res.safeArea.top);
let navbarInfo = await this.$u.getRect('#navbar');
let topBoxInfo = await this.$u.getRect('#topBox');
this.currentHeight = this.vuex_windowHeight - navbarInfo.height;
this.mescrollHeight = this.currentHeight - topBoxInfo.height;
},
methods: {
tabsChange(index) {
this.swiperCurrent = index;
},
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
}
}
}
</script>
