vue 实现分页和多页签功能

直接看源码

<template><view class="wrap"><u-navbar  back-text="返回" title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="true" :back-text-style="{'color':'#fff'}":background="background"  :custom-back="goback"><view class="slot-wrap" v-if="true"><view class="search-wrap" v-if="true"><!-- 如果使用u-search组件，必须要给v-model绑定一个变量 --><u-search v-model="selectParams.keyWord" @blur = "search()" placeholder="事项、跟进人、备注":show-action="false"  height="56" :action-style="{color: '#fff'}"></u-search></view><view class="navbar-right" v-if="true"><view class="message-box right-item"><u-icon name="plus" @click="addItem()" size="38">新增</u-icon>   </view></view>  </view>       </u-navbar><view class="u-tabs-box"><u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper></view><swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"><swiper-item class="swiper-item" v-for="(item,index) in list" :key="index"><scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"><view class="page-box"><view class="order" v-for="(item, index2) in  dataList[index]" :key="item.aguid" ><view class="item_top" @click="editItem(item)"><view class="item_title"><view class="item_id_laber color0 " v-if="item.status ==0">待办公</view><view class="item_id_laber color1" v-if="item.status == 1">已办公</view><view class="item_Text"><view>发起人：</view><view style="color:#333;">{{item.fqry}}</view></view></view><view class="item_Text"><view>开始时间：</view><view>{{item.fqDateTime}}</view></view>    <view class="item_Text"><view>事项：</view><view style="color:#333;">{{item.itemContent}}</view></view><view class="item_Text"><view>跟进人：</view><view>{{item.gjry}}</view></view><view class="item_Text"><view>要求时间：</view><view>{{item.finishDateTime}}</view></view><view class="item_Text"><view>备注：</view><view>{{item.remark}}</view></view><view class="item_Text"><view>完成人：</view><view>{{item.wcry}}</view></view></view><view class="item_bottom" ><view class="item_Text" ><view style="color:#ff557f;">完成时间：</view><view style="color:#ff557f;">{{item.wcDateTime}}</view>   <u-icon style="color:#ff557f; margin-left: 50rpx;" size="38rpx"  name="checkmark-circle" @click="check(item)"></u-icon></view></view></view></view><u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore></scroll-view></swiper-item></swiper><view><u-toast ref="uToast" /></view></view>
</template><script>export default {data() {return {background: {'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'},list: [{name: '待办公'},{name: '已办公'},{name: '全部'}],current: 0,swiperCurrent:0,dx: 0,loadStatus: ['loadmore','loadmore','loadmore'],dataList:[[],[],[]],totalPages:0, keyWord:null,selectParams:{keyWord: '',status:0,pageSize:5,pageIndex:1 }}},async onLoad() {await this.getOrderList(0)await this.getOrderList(1)await this.getOrderList(2)},methods: {goback(){uni.reLaunch({url:'/pages/index/index'}) //要用这个才可以},addItem(){this.$u.route('/pages/schedule/scheduleDetail',{flag:"insert"})},editItem(item){this.$u.route('/pages/schedule/scheduleDetail',item)},reachBottom() {this.loadStatus.splice(this.current,1,"loading")setTimeout(() => {if(this.selectParams.pageIndex<this.totalPages){this.selectParams.pageIndex  = this.selectParams.pageIndex  + 1this.getOrderList(this.selectParams.status);  }else{this.loadStatus.splice(this.current,1,"nomore")}}, 500);},transition({ detail: { dx } }) {this.$refs.tabs.setDx(dx);},animationfinish({ detail: { current } }) {this.$refs.tabs.setFinishCurrent(current);this.swiperCurrent = current;this.current = current;    },// 获取数据async getOrderList(index){this.selectParams.status = indexconst res = await this.$u.api.scheduleList(this.selectParams)for(let i = 0,length = res.length;i<length;i++){res[i].aguid = this.$u.guid()this.dataList[this.selectParams.status].push(res[i])}if(res.length>0){this.totalPages =Math.ceil(res[0].guid_count/this.selectParams.pageSize)}this.loadStatus.splice(this.current,1,"loadmore")},// 点击tab栏切换 change(index) {this.swiperCurrent = index;this.selectParams.status = this.swiperCurrent;this.selectParams.pageIndex = 1this.totalPages = 0this.dataList[this.selectParams.status] = []this.getOrderList(this.selectParams.status);},//条件搜索search(){this.selectParams.pageIndex = 1this.totalPages = 0this.dataList[this.selectParams.status] = []this.getOrderList(this.selectParams.status)},//审核工作async check(item){const wcry = await uni.getStorageSync("username")const params = {id:item.id,wcry:wcry,}const res = await this.$u.api.scheduleCheck(params)if(res.flag && this.swiperCurrent===0){// 删除一个itemthis.dataList[0].splice(this.dataList[0].indexOf(item),1);this.$refs.uToast.show({title: res.msg})}else if(res.flag && this.swiperCurrent===2){this.$refs.uToast.show({title: res.msg})this.search()}else{this.$refs.uToast.show({title: res.msg})}},}}
</script><style>
/* #ifndef H5 */
page {height: 100%;background-color: #f2f2f2;
}
/* #endif */
</style><style lang="scss" scoped>.u-demo {//height: 200vh;height: calc(100% - 44px);height: calc(100% - 44px - constant(safe-area-inset-top));height: calc(100% - 44px - env(safe-area-inset-top));}.wrap {display: flex;flex-direction: column;height: calc(100vh - var(--window-top));width: 100%;}.swiper-box {flex: 1;}.swiper-item {height: 100%;}.navbar-right {margin-right: 24rpx;display: flex;}.search-wrap {margin: 0 20rpx;flex: 1;}.right-item {margin: 0 12rpx;position: relative;color: #ffffff;display: flex;}.message-box {}.slot-wrap {display: flex;align-items: center;flex: 1;}.map-wrap {display: flex;align-items: center;padding: 4px 6px;background-color: rgba(240,240, 240, 0.35);color: #fff;font-size: 22rpx;border-radius: 100rpx;margin-left: 30rpx;}.map-wrap-text {padding: 0 6rpx;}.order {width: 710rpx;background-color: #ffffff;margin: 20rpx auto;border-radius: 20rpx;box-sizing: border-box;padding: 20rpx;font-size: 28rpx;.item_top {width:100%;padding: 20upx;box-sizing: border-box;padding-top: 10upx;.item_title{font-size: 30upx;color: #ff557f;display: flex;flex-direction: row;border-bottom: 1px solid #eee;padding-bottom: 10upx;.item_id_laber{width: 150upx;height: 68upx;line-height: 40upx;color: #ffffff;text-align:center;font-size: 30upx;border-radius: 4upx;flex-shrink: 0;margin-right: 10upx;margin-top: -10upx;padding-top: 12upx;} }}}.color0{background: #ffc63c;}.color1{background:  #44dd81;}.item_Text:nth-child(1){margin-top: 20upx;}.item_Text{font-size: 30upx;color: #999;margin-top: 5upx;display: flex;flex-direction: row;}.item_Text view:nth-child(1),.item_user_name{flex-shrink: 0;width: 180upx;text-align: center;}.item_bottom{width:100%;padding:10upx 20upx;font-size: 26upx;color: #999;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;border-top: 1px solid #eee;}</style>

效果图：

vue 实现分页和多页签功能相关推荐

Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来
转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/8769904 首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我 ...
html内容页上一页下一页,帝国CMS内容页增加内容分页上一页标签功能！
帝国CMS一直以来升级没有提供内容分页的上一页标签功能,只有一个:内容页下一页[!--next.page--] 标签!所以下面就是要改造一下这个标签,实现内容页上一页的功能! 步骤如下: 打开e/cl ...
vue ---05 分页和详情页功能的实现
课程列表页分页显示数据 rest_framework 里面封装了有分页功能的组件,直接可以拿来即用在courses/views.py 中新建一个分页器类 (类的嵌套) from rest_fram ...
jquery打印html页面自动分页,前端实现指定位置分页、多页打印功能（jquery.print.js）...
1. 分类原生打印,window.print() 实现插件实现,很多种,我这里选择的是 jquery.print.js 优缺点原生打印的好处就不多说了,简单方便,全屏打印,如果对打印功能没有什么 ...
vue实现tagsview多页签导航功能
文章目录前言一.效果图二.实现思路 1. 新建 tags-view.js 2. 在Vuex里面引入 tags-view.js 3. 新建 tabsView 组件 4. 新建 ScrollPane ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
基于微前端qiankun的多页签缓存方案实践
作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开 ...
【实战】1096- React 中后台系统多页签实现
在中后台管理类系统中,多页签的需求非常普遍,用户常常需要在多个页签内跳转,比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写.这样的需求在 Vue 中使用 keep-alive 即可实现, ...
彩虹浏览器使用技巧:页签自动切换
核心提示:彩虹66760设计了创新的页签自动切换功能,当鼠标移动到某个页签时,无需要点击就能自动激活您所想打开的网页,这个功能是不是很酷很炫呢,为大家节约一点小时间. 1,悬停换页彩虹浏览器设计了创 ...

vue 实现分页和多页签功能

vue 实现分页和多页签功能相关推荐

最新文章

热门文章