The tap page is used for uniapp, but the basic tap page of uView does not support left or right swiper, so tap-swiper is used
But this component has to be wrapped around an Scroll view and then the dropdown refresh that comes with UniApp is gone and you have to use the dropdown refresh that comes with the Scroll View
But there was a problem with the scroll view’s built-in drop-down refresh that couldn’t cancel the animation after the refresh. I also searched a lot on the Internet but couldn’t find a good solution
Later, I worked it out by myself. Although the performance is not very good, I can still use the following ideas for reference only. If there is a better method, I can leave a message and reply
- The swiper-item in tab-swiper is going to iterate through an array and the array is going to tell you how many TAB pages uView has instances so we can write this array like this
<swiper-item
class="swiper-item"
v-for="(item, index) in list"
:key="index"
>
/ /... Leave the contents alone for now
<swiper-item />
data(){
return {
list: [[1], [1], [1]].}}Copy the code- And then when we trigger the drop-down refresh we’re going to empty this array like that
this.list = [[], [], []]
Copy the code- And then we’re going to write a property inside the Scroll view
v-if='item.length'It means that this array is only displayed if it’s worth it and not displayed if it’s not worth it - So if we do a drop-down refresh and we empty the scroll view it’s not going to show and then the animation that we did the drop-down refresh is going to disappear and we’re going to stop the drop-down refresh
- And then we’re going to pull down and of course we’re going to call the interface to get the data and we’re going to get the data and we’re going to assign and then we’re going to restore the list
list: [[1], [1], [1]], - This will stop every time the pull-down refresh is triggered because the list is empty (you can use a timer to control the stop time).
- Then get the data and give him the state to restore the cost
The code below is for reference only
<template>
<view class="container">
<view class="header">
<u-search
bg-color="#fff"
placeholder="Please enter search content"
:show-action="false"
v-model="keyword"
@search="searchChange"
></u-search>
</view>
<view style="padding-top: 50px">
<u-tabs-swiper
ref="tabs"
active-color="#4FCBA1"
:is-scroll="false"
:bold="false"
:list="tabList"
:current="current"
@change="changeTabs"
>
</u-tabs-swiper>
</view>
<swiper
class="main"
:current="swiperCurrent"
duration="300"
@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%"
@refresherrefresh="refresherrefresh"
@scrolltolower="scrolltolower"
refresher-enabled
v-if="item.length > 0"
>
<view class="message-content">
<! -- Available -->
<view v-if="current === 0">
<view
v-for="(item, index) in getSendList"
:key="index"
class="card-v-for"
>
<getTesk @fsList="fsList" :data="item" />
</view>
</view>
<! -- Governance -->
<view v-if="current === 1">
<view
v-for="(item, index) in sendList"
:key="index"
class="card-v-for"
>
<govern :data="item" :type="1" />
</view>
</view>
<! -- Completed -->
<view v-if="current === 2">
<view
v-for="(item, index) in sendList"
:key="index"
class="card-v-for"
>
<govern :type="2" :data="item" />
</view>
</view>
</view>
<view style="padding: 10rpx">
<u-loadmore
:status="status"
:icon-type="iconType"
:load-text="loadText"
/>
</view>
</scroll-view>
<u-empty v-else mode="list"></u-empty>
</swiper-item>
</swiper>
</view>
</template>
<script>
import getTesk from './getTesk.vue'
import govern from './govern.vue'
import { Search, getSearch } from '@/api/country/governace'
export default {
components: { getTesk, govern },
data() {
return {
list: [[1], [1], [1]],
tabList: [{name: 'available'
},
{
name: 'Governing'
},
{
name: 'Done'}].page: 1.keyword: ' '.status: 'loadmore'.iconType: 'flower'.loadText: {
loadmore: 'Gently pull up'.loading: 'Trying to load'.nomore: 'There is no more.'
},
sendList: [].getSendList: [].current: 0.swiperCurrent: 0}},onLoad() {
// console.log(' triggered ')
// this.getData()
},
onShow() {
console.log('trigger')
this.page = 1
this.sendList = []
this.getSendList = []
this.getData()
},
methods: {
// ================= drop down refresh =================
async refresherrefresh(a) {
// Initialize the data
this.page = 1
this.sendList = []
this.getSendList = []
this.list = [[], [], []]
await this.getData()
},
// ================= is loaded =================
scrolltolower() {
this.status = 'loading'
this.page = this.page + 1
setTimeout(() = > {
this.getData()
this.status = 'nomore'
}, 1000)},// ================= search =================
searchChange() {
this.page = 1
this.sendList = []
this.getData()
this.getSendList = []
},
// ================= Obtain data =================
getData(val) {
// +++++++++ reset refresh +++++++++
const params = {
page: this.page,
limit: 5.governState: 1.title: this.keyword
}
if (this.current === 1) {
params.governState = 1
} else if (this.current === 2) {
params.governState = 2
}
// +++++++++ in process/completed +++++++++
Search(params).then((res) = > {
if (res.data.records.length || !this.sendList.length) {
this.status = 'nomore'
}
this.sendList = this.sendList.concat(res.data.records)
if (+this.current === 1 || +this.current === 0) {
this.$set(this.tabList, 1, {
name: In 'governance' (${res.data.total}) `})}})// +++++++++ available at +++++++++
const obj = {
page: this.page,
limit: 5.governState: ' '.title: this.keyword
}
getSearch(obj).then((res) = > {
if (res.data.records.length || !this.getSendList.length) {
this.status = 'nomore'
}
this.getSendList = this.getSendList.concat(res.data.records)
})
// }
// +++++++++ Control refresh +++++++++
setTimeout(() = > {
this.list = [[1], [1], [1]]},100)},// ================= Refresh list =================
fsList() {
this.page = 1
this.getSendList = []
this.sendList = []
this.getData()
},
// ================= Toggle tabs page =================
changeTabs(index) {
this.swiperCurrent = index
this.current = index
},
/ / slide TAB
transition({ detail: { dx } }) {
// this.$refs.tabs.setDx(dx)
},
// The TAB animation ends
animationfinish({ detail: { current } }) {
this.$refs.tabs.setFinishCurrent(current)
this.swiperCurrent = current
this.current = current
}
},
watch: {
current: {
handler() {
this.page = 1
this.sendList = []
this.getSendList = []
this.getData()
}
}
}
}
</script>
<style lang="scss" scoped>
.header {
z-index: 10;
padding: 14rpx 24rpx;
position: fixed;
width: 100%;
background: #f5f5f5;
}
.message-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 28rpx 40rpx;
margin-bottom: 20rpx;
background: #fff;
color: # 333;
.title {
font-size: 28rpx;
font-weight: bold;
padding-bottom: 24rpx;
}
.msg-content {
display: flex;
padding-bottom: 24rpx;
justify-content: space-between;
}
.msg-review {
text-align: center;
color: #4fcca0;
font-size: 28rpx;
border-top: 1rpx solid #eee;
padding: 24rpx 0 0 0; }}.footer {
padding: 60rpx 0;
display: flex;
align-items: center;
background: #fff;
position: fixed;
bottom: 0;
z-index: 999;
}
.message-content {
padding: 0rpx 0 20rpx 0;
// height: 100%;
}
.card-v-for {
margin-bottom: 30rpx;
}
</style>
Copy the code