|
|
<!-- 自定义下拉刷新与上拉加载演示(vue) -->
|
|
|
<template>
|
|
|
<view class="wrap">
|
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
|
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
|
|
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
|
|
<template #top>
|
|
|
<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
|
|
|
<!-- 状态栏占位 -->
|
|
|
<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
|
|
|
<!-- 真正的导航栏内容 -->
|
|
|
<view class="navBar">
|
|
|
<view class="back" @click="goback">
|
|
|
<u-icon name="arrow-left"></u-icon>
|
|
|
</view>
|
|
|
<view>{{menutitle}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- <z-tabs :list="tabList" @change="tabChange" /> -->
|
|
|
</template>
|
|
|
|
|
|
<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
|
|
|
|
|
|
<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
|
|
|
<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
|
|
|
<!-- <template #refresher="{refresherStatus}">
|
|
|
此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view
|
|
|
<custom-refresher :status="refresherStatus" />
|
|
|
<view class="loadmore">
|
|
|
加载
|
|
|
</view>
|
|
|
</template> -->
|
|
|
<!-- 自定义没有更多数据view -->
|
|
|
<!-- <template #loadingMoreNoMore>
|
|
|
此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view
|
|
|
<custom-nomore />
|
|
|
<view class="loadmore">
|
|
|
--没有更多了--
|
|
|
</view>
|
|
|
</template> -->
|
|
|
|
|
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
|
|
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
|
|
|
<view class="item-title">{{item.title}}</view>
|
|
|
<view class="item-line"></view>
|
|
|
</view>
|
|
|
</z-paging>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
|
|
dataList: [],
|
|
|
list:[],
|
|
|
navBarBoxHeight: 0,
|
|
|
statusBarHeight: 40,
|
|
|
menutitle: '学习记录',
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
|
|
this.navBarBoxHeight = 80 + this.statusBarHeight * 2
|
|
|
},
|
|
|
methods: {
|
|
|
goback(){
|
|
|
uni.redirectTo({
|
|
|
url:'/pages/me/me'
|
|
|
})
|
|
|
},
|
|
|
queryList(pageNo, pageSize) {
|
|
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
|
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
|
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
|
|
const params = {
|
|
|
pageNo: pageNo,
|
|
|
pageSize: pageSize,
|
|
|
type: this.tabIndex + 1
|
|
|
}
|
|
|
for(var i=0;i<9;i++){
|
|
|
this.list.push({
|
|
|
title:'实际引导'+i,
|
|
|
})
|
|
|
}
|
|
|
this.$refs.paging.complete(this.list);
|
|
|
// this.$request.queryList(params).then(res => {
|
|
|
// // 将请求的结果数组传递给z-paging
|
|
|
// this.$refs.paging.complete(res.data.list);
|
|
|
// }).catch(res => {
|
|
|
// // 如果请求失败写this.$refs.paging.complete(false);
|
|
|
// // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
|
// // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
|
// this.$refs.paging.complete(false);
|
|
|
// })
|
|
|
},
|
|
|
itemClick(item) {
|
|
|
console.log('点击了', item.title);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.wrap {
|
|
|
.navBarBox {
|
|
|
// position: fixed;
|
|
|
// top: 0;
|
|
|
// left: 0;
|
|
|
// z-index: 999;
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
|
// margin-bottom:24rpx;
|
|
|
.navBar {
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
.back {
|
|
|
position: absolute;
|
|
|
left: 20rpx;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.swiper {
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
::v-deep .zp-paging-container-content{
|
|
|
padding-bottom:200rpx;
|
|
|
}
|
|
|
.loadmore{
|
|
|
font-size: 15px;
|
|
|
margin: 0px 3px;
|
|
|
color:rgb(164, 164, 164);
|
|
|
text-align: center;
|
|
|
height:80rpx;
|
|
|
line-height: 80rpx;
|
|
|
}
|
|
|
}
|
|
|
.item {
|
|
|
position: relative;
|
|
|
/* height: 150rpx; */
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin: 0rpx 30rpx;
|
|
|
padding:30rpx 5rpx;
|
|
|
|
|
|
}
|
|
|
.item-title{
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.item-line {
|
|
|
position: absolute;
|
|
|
bottom: 0rpx;
|
|
|
left: 0rpx;
|
|
|
height: 1px;
|
|
|
width: 100%;
|
|
|
background-color: #eeeeee;
|
|
|
}
|
|
|
</style>
|
