关于tab栏切换时数据接口的调用

<template><view class="container"><view class="tabBox" :style="{ position: headerPosition, top: headerTop }"><u-tabs:is-scroll="tabs.length > 4":current="current"@change="changeTab"height="90"font-size="28":list="tabs"active-color="#FF8810":show-bar="false"class="tab-1"></u-tabs></view><view class="content"><view v-if="!tabs[current].nomore" class="listblock"><viewv-for="(item, key) in tabs[current].list":key="key"class="item"@click="handleToUrl(item.acci_type == '1'? '/pages/case/caseDetail/trafficDetail': '/pages/case/caseDetail/injuryDetail',item)"><view:class="['status','iconfont','icondaitijiao',filterCss(item.exa_status)]"><text>{{ getValue(item.exa_status, dic.processDic) }}</text></view><view class="top"><view class="title"><image:src="'/static/images/case_type' + item.acci_type + '.png'"mode="scaleToFill"></image>{{(item.client_name && item.client_name.substring(0, 6)) || '-'}}<text>&middot;</text>{{ item.client_phone || '-' }}</view><view class="role" v-if="item.acci_type == '1'">客户角色：{{ getValue(item.role, dic.roleDic) }}</view><view class="role" v-else>客户角色：{{ getValue(item.role, dic.roleInjuryDic) }}</view></view><view class="middle"><view class="type"><view>案件类型：{{ getValue(item.acci_type, dic.caseTypeDic) }}</view><view v-if="item.acci_type == '1' && item.is_insure">有无保险：{{ getValue(item.is_insure, dic.hasDic) }}</view><view v-if="item.acci_type == '1' && item.client_responsibility">客户责任：{{getValue(item.client_responsibility, dic.dutyDic)}}</view><view v-if="item.acci_type == '2' && item.has_injury_insur">有无工伤保险：{{getValue(item.has_injury_insur, dic.hasDic)}}</view><view v-if="item.acci_type == '2' && item.has_contract">有无劳动合同：{{getValue(item.has_contract, dic.dutyDic)}}</view><view>事故时间：{{item.acci_time && dayjs(item.acci_time).format('YYYY-MM-DD')}}</view></view><!-- <view class="label" v-if="item.assess_fee">评估费用：{{ item.assess_fee }} 元</view> --></view><view class="line"> </view><view class="bottom"><view class="time"> <b>NO：</b>{{ item.case_id }} </view></view></view><viewclass="nomore"v-if="tabs[current].list.length > 0 && tabs[current].status == 'nomore'">没有更多了</view></view>c</view></view>
</template><script>
import dayjs from 'dayjs';
import {caseTypeDic,carTypeDic,roleDic,dutyDic,processDic,hasDic,roleInjuryDic
} from '@/const/dic';
import { getValue } from '@/utils/data';
export default {components: {},data() {return {dic: {caseTypeDic,carTypeDic,roleDic,dutyDic,processDic,hasDic,roleInjuryDic},headerPosition: 'fixed',headerTop: '0px',current: 0,tabs: [{name: '全部',state: '03,31,99',nomore: false,status: 'loadmore',page: {total: 0, //总页数currentPage: 1, //当前页数pageSize: 10 //每页显示多少条},list: []},{name: '已完结',state: '31',nomore: false,status: 'loadmore',page: {total: 0, //总页数currentPage: 1, //当前页数pageSize: 10 //每页显示多少条},list: []},{name: '未受理',state: '03',nomore: false,status: 'loadmore',page: {total: 0, //总页数currentPage: 1, //当前页数pageSize: 10 //每页显示多少条},list: []},{name: '已放弃',state: '99',nomore: false,status: 'loadmore',page: {total: 0, //总页数currentPage: 1, //当前页数pageSize: 10 //每页显示多少条},list: []}],scroll: false,dayjs,getValue,processArr: [{label: '橙色',code: ['03'],css: ''},{label: '绿色',code: ['31'],css: 'success'},{label: '灰色',code: ['99'],css: 'default'}]};},computed: {filterCss: function () {return function (current) {let arr = this.processArr.filter((action) =>action.code.includes(current));return arr[0].css;};}},onLoad(options) {this.headerTop = '44px';// #ifdef APP-PLUSthis.headerTop = '0px';// #endifthis.tabs[this.current].page.currentPage = 1;this.tabs[this.current].page.total = 0;this.tabs[this.current].list = [];this.loadData();},onPageScroll(e) {//兼容iOS端下拉时顶部漂移if (e.scrollTop >= 0) {this.headerPosition = 'fixed';} else {this.headerPosition = 'absolute';}},onPullDownRefresh() {this.tabs[this.current].page.currentPage = 1;this.tabs[this.current].page.total = 0;this.tabs[this.current].list = [];this.loadData();},onReachBottom() {if (this.tabs[this.current].list.length === this.tabs[this.current].page.total)return;this.tabs[this.current].status = true;this.loadData();},methods: {changeTab(index) {this.current = index;if (this.tabs[this.current].list.length > 0) return;this.tabs[this.current].page.currentPage = 1;this.tabs[this.current].page.total = 0;this.tabs[this.current].list = [];this.loadData();},async loadData() {const page = this.tabs[this.current].page;const result = await this.$H.post('/case/appCaseList', {start: (page.currentPage - 1) * page.pageSize,length: page.pageSize,exa_status: this.tabs[this.current].state});this.keywords = '';if (Number(result.code) == 200) {this.tabs[this.current].page.currentPage = ++this.tabs[this.current].page.currentPage;this.tabs[this.current].page.total = result.data.total;this.tabs[this.current].list = [...this.tabs[this.current].list,...result.data.list];}this.tabs[this.current].list.forEach((item) => {item.labels = item.lable_name ? item.lable_name.split(',') : [];});if (this.tabs[this.current].list.length ===this.tabs[this.current].page.total)this.tabs[this.current].status = 'nomore';else this.tabs[this.current].status = 'loading';this.tabs[this.current].page.total === 0? (this.tabs[this.current].nomore = true): (this.tabs[this.current].nomore = false);uni.stopPullDownRefresh();},handleToUrl(url, item) {if (item) {uni.setStorageSync('addBaseData', {case_id: item.case_id,increment_id: item.increment_id,role: item.role});}uni.navigateTo({url: `${url}`});}}
};
</script>

关于tab栏切换时数据接口的调用相关推荐

apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
DOM（二）：几个NB案例、属性操作（自定义属性）、tab栏切换（重难点）
这里写目录标题一.几个案例: 案例1:如何实现点击一个按钮亮,其余按钮全灭? 案例2:浏览器换肤效果案例3:表格隔行变色案例4:全选框和复选框(难的一塌糊涂) 我自己的逻辑: 老师操作小弟的逻辑 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vant/vue——tab栏切换上下箭头功能实现
有的tab栏需要点击两次从而达到排序的功能下面是实现双重tab栏切换功能 css样式 .active {color: red; } .black{color: black; } 标签部分 <u ...
1~22（面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换）
1 面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
vue之tab栏切换
一个简单的tab栏切换组件,由tabs以及tab-pane组成效果图使用 <template><div class="container"><ta ...

关于tab栏切换时数据接口的调用

关于tab栏切换时数据接口的调用

关于tab栏切换时数据接口的调用相关推荐

最新文章

热门文章