当前位置：网站首页>Uniapp -- list page of multi header tabs
Uniapp -- list page of multi header tabs
2022-06-25 23:40:00 【BetterGG】
One 、 Use vue Page implementation
Click here to view the screen recording effect
- One disadvantage ： See video page 18 second , First, scroll up the list , Another breath of air slides to the top （ I.e. sliding with force , Let the page automatically scroll to the top ）, Will directly start the pull-down refresh , It usually stops at the top , Pull down again to trigger pull-down refresh , However, many people are used to pulling down more when they slide to the top , Refresh the page , Ensure that you reach the top and get the latest data , This may just meet the needs of some people .
- Disadvantages two ： See video page 20 second , Pull down refresh and slide switch may be triggered at the same time , Leading to feeling imperfect , But it doesn't affect the function , Will not lead to bug, This effect occurs because the list is at the top , At this point, the finger drops down diagonally , Events that trigger both sliding and pull-down refresh result in , If you don't do it intentionally , Generally, this problem does not arise , Even if you do it on purpose , It will not cause data loading errors .
- Disadvantage 1: optimization scheme ： Use one flag As refresher-enabled The attribute value , Determine whether the contents of the scrolling area are currently at the top , If not on top , The value is false, Otherwise true.
- The second disadvantage is the optimization scheme ： Also use a flag As refresher-enabled The attribute value , Use at the same time @transition and @animationfinish monitor swiper Whether the window starts sliding or ends sliding , At the beginning of sliding flag = false, At the end flag = true.
- refresher-enabled by scroll-view Properties of , The function is to set whether it can be pulled down and refreshed .
index.vue Page code
<template>
<view class="tui-tabs">
<scroll-view id="tab-bar" scroll-x scroll-with-animation class="tui-scroll-h" :show-scrollbar="false" :scroll-into-view="scrollInto">
<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
<text class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{
{
tab.name }}</text>
</view>
</scroll-view>
<view class="tui-line-h"></view>
<swiper :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
<swiper-item class="tui-swiper-item" v-for="(tab, index1) in newsList" :key="index1">
<scroll-view
class="tui-scroll-v"
:refresher-enabled="refresherEnabled"
:refresher-triggered="tab.refreshing"
refresher-background="#fafafa"
enable-back-to-top
:refresher-threshold="100"
scroll-y
@scrolltolower="loadMore(index1)"
@refresherrefresh="onrefresh"
>
<view v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
<news-item :itemData="newsitem" @close="close(index1, index2)" :lastChild="index2 === tab.data.length - 1" @click="goDetail(newsitem)"></news-item>
</view>
<view class="tui-loading-more" v-if="tab.isLoading || tab.pageIndex > 3">
<text class="tui-loadmore-line" v-if="tab.pageIndex > 3"></text>
<text class="tui-loading-more-text">{
{
tab.loadingText }}</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import newsItem from './news-item.vue';
// Cache maximum pages
const MAX_CACHE_PAGEINDEX = 3;
// Number of cache tabs
const MAX_CACHE_PAGE = 3;
const newsData = [
{
title: ' Teachers should keep these words in mind ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3101,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' CCTV news '
},
{
title: ' The United States will vote to approve the new ambassador to China It is expected to go to China at the end of this month ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3102,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' CCTV news '
},
{
title: ' Which majors have high income after graduation ? Computer 、 The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3103,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Guangdong Hong Kong Elite Alliance '
},
{
title: ' The sci tech Innovation Board trading system is ready , There is no first list ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3104,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Encyclopedia stories '
},
{
title: ' Which majors have high income after graduation ? Computer 、 The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3103,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Guangdong Hong Kong Elite Alliance '
},
{
title: ' The sci tech Innovation Board trading system is ready , There is no first list ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3104,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Encyclopedia stories '
},
{
title: ' Which majors have high income after graduation ? Computer 、 The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3103,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Guangdong Hong Kong Elite Alliance '
},
{
title: ' The sci tech Innovation Board trading system is ready , There is no first list ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3104,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Encyclopedia stories '
},
];
export default {
components: {
newsItem
},
data() {
return {
isIos: false,
newsList: [],
cacheTab: [],
tabIndex: 0,
tabBars: [],
scrollInto: '',
showTips: false,
navigateFlag: false,
pulling: false,
refreshIcon:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRBAMAAABYoVcFAAAAKlBMVEUAAACXl5eZmZmfn5+YmJiXl5eampqZmZmYmJiYmJiZmZmYmJiZmZmZmZl02B9kAAAADXRSTlMAQKAQ0GAsUN+wz5CA21ow0AAAAM5JREFUSMftzLEJAkEQheFR4WzjGji4wC5E0A7E0OgaEIwF4RqwJEEODKcX1114yQ/uhsLtY6Lh57NZ7Dz1heXd27Kwcb+WlQv3Vy1rWcta1rKW/1Q2R8PWt8FYdhPLi79ZLt33KB/hibJzH1E+PaAqRfqAcuMBVSlyMmy1C6hKka0CoCpBAlUJEmgsQQJVCRKoSpBAU0mSaCpJEk0lSSMaS5JG9FuK/IkeQkmSaEjikSSaRpJoHEmiIvOoyCwqMo+KzKMi8+hoZTtte5vDPrSGI5zJ/Z1kAAAAAElFTkSuQmCC'
};
},
onLoad() {
setTimeout(() => {
this.tabBars = [
{
name: ' hot ',
id: 'hot'
},
{
name: ' entertainment ',
id: 'yule'
},
{
name: ' sports ',
id: 'sports'
},
{
name: ' At home ',
id: 'domestic'
},
{
name: ' Finance and economics, ',
id: 'finance'
},
{
name: ' Technology ',
id: 'keji'
},
{
name: ' education ',
id: 'education'
},
{
name: ' automobile ',
id: 'car'
}
]
this.init()
}, 200);
},
methods: {
init() {
this.newsList = this.randomfn();
},
randomfn() {
let ary = [];
for (let i = 0, length = this.tabBars.length; i < length; i++) {
let aryItem = {
loadingText: ' Being loaded ...',
refreshing: false,
refreshText: '',
data: [],
isLoading: false,
pageIndex: 1
};
if (i === 0) {
aryItem.pageIndex = 2;
aryItem.data = aryItem.data.concat(newsData);
}
ary.push(aryItem);
}
console.log(ary)
return ary;
},
getList(index, refresh) {
let activeTab = this.newsList[index];
let list = newsData || [];
if (refresh) {
activeTab.data = [];
activeTab.loadingText = ' Being loaded ...';
activeTab.pageIndex = 2;
activeTab.data = list || [];
} else {
activeTab.data = activeTab.data.concat(list);
activeTab.pageIndex++;
activeTab.isLoading = false;
// Modify the judgment conditions according to the actual conditions
if (activeTab.pageIndex > 3) {
activeTab.loadingText = ' There is no more ';
}
}
},
goDetail(e) {
if (this.navigateFlag) return;
this.navigateFlag = true;
uni.navigateTo({
url: '/pages/template/news/newsDetail/newsDetail'
});
setTimeout(() => {
this.navigateFlag = false;
}, 200);
},
loadMore(e) {
let activeTab = this.newsList[this.tabIndex];
if (activeTab.pageIndex < 4 && !activeTab.isLoading) {
activeTab.isLoading = true;
setTimeout(() => {
this.getList(this.tabIndex);
}, 300);
}
},
tabClick(e) {
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.switchTab(index);
},
tabChange(e) {
let index = e.target.current || e.detail.current;
this.switchTab(index);
},
swiperTransition() {
this.refresherEnabled = false;
},
swiperAnimationfinish() {
this.refresherEnabled = true;
},
switchTab(index) {
if (this.tabIndex === index) return;
if (this.newsList[index].data.length === 0) {
this.getList(index);
}
// cache tabId
if (this.newsList[this.tabIndex].pageIndex > MAX_CACHE_PAGEINDEX) {
let isExist = this.cacheTab.indexOf(this.tabIndex);
if (isExist < 0) {
this.cacheTab.push(this.tabIndex);
//console.log("cache index:: " + this.tabIndex);
}
}
this.tabIndex = index;
let scrollIndex = index - 1 < 0 ? 0 : index - 1;
this.scrollInto = this.tabBars[scrollIndex].id;
// Release tabId
if (this.cacheTab.length > MAX_CACHE_PAGE) {
let cacheIndex = this.cacheTab[0];
this.clearTabData(cacheIndex);
this.cacheTab.splice(0, 1);
//console.log("remove cache index:: " + cacheIndex);
}
},
clearTabData(e) {
this.newsList[e].data.length = 0;
this.newsList[e].loadingText = ' Load more ...';
},
onrefresh(e) {
var tab = this.newsList[this.tabIndex];
if (tab.refreshing) {
return;
}
tab.refreshing = true;
setTimeout(() => {
uni.stopPullDownRefresh();
this.getList(this.tabIndex, true);
this.pulling = true;
tab.refreshing = false;
uni.showToast({
title: ' Refresh successful ',
icon: 'none'
});
setTimeout(() => {
// TODO fix ios and Android The animation time is opposite
this.pulling = false;
}, 500);
}, 3000);
},
},
onPullDownRefresh() {
console.log('onPullDownRefresh')
}
};
</script>
<style>
page {
width: 100%;
min-height: 100%;
display: flex;
height: 100vh;
}
.tui-tabs {
flex: 1;
flex-direction: column;
overflow: hidden;
background-color: #fafafa;
}
.tui-scroll-h {
white-space: nowrap;
height: 80rpx;
background-color: #ffffff;
display: flex;
flex-direction: row;
/* #ifdef H5 */
position: fixed;
top: 44px;
left: 0;
z-index:999;
/* #endif */
}
.tui-line-h {
height: 1rpx;
background-color: #cccccc;
position: relative;
}
.tui-tab-item {
display: inline-block;
padding-left: 34rpx;
padding-right: 34rpx;
flex-wrap: nowrap;
}
.tui-tab-item-title {
color: #555;
font-size: 30rpx;
height: 80rpx;
line-height: 80rpx;
flex-wrap: nowrap;
white-space: nowrap;
}
.tui-tab-item-title-active {
color: #5677fc;
font-size: 36rpx;
font-weight: bold;
border-bottom: 6rpx solid #5677fc;
text-align: center;
display: block;
box-sizing: border-box;
}
.tui-swiper-box {
height: 100%;
overflow-y: auto;
/* #ifdef H5 */
margin-top: 80rpx;
/* #endif */
}
.tui-swiper-item {
flex: 1 !important;
flex-direction: row;
}
.tui-scroll-v {
width: 100%;
height: 100%;
}
.tui-loading-more {
align-items: center;
justify-content: center;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
position: relative;
}
.tui-loadmore-line {
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #e5e5e5;
width: 320rpx;
position: absolute;
z-index: -1;
}
.tui-loading-more-text {
padding-left: 8rpx;
padding-right: 8rpx;
font-size: 28rpx;
line-height: 28rpx;
background-color: #fafafa;
text-align: center;
color: #999;
}
</style>
Two 、 Use nvue Page implementation
Click here to view the screen recording effect
- This method is not as good as the above vue Page mode 2 Disadvantages , But there are other drawbacks
- One disadvantage ： It uses nvue page ,nvue Page css Styles do not support many features
- Disadvantages two ：nvue The page does not support iconfont Text icons , Must be introduced in its specific way , So far I've tried , But not yet
index.nvue Page code （ Its internal components can be vue page ）
<template>
<view class="tui-tabs">
<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
<!-- #ifdef APP-PLUS -->
<text class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{
{
tab.name }}</text>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<view class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{
{
tab.name }}</view>
<!-- #endif -->
</view>
</scroll-view>
<view class="tui-line-h"></view>
<swiper :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange">
<swiper-item class="tui-swiper-item" v-for="(tab, index1) in newsList" :key="index1">
<!-- #ifdef APP-NVUE -->
<list class="tui-scroll-v" enableBackToTop="true" scroll-y loadmoreoffset="15" @loadmore="loadMore(index1)">
<refresh class="tui-refresh" @refresh="onrefresh(index1)" @pullingdown="onpullingdown" :display="tab.refreshing ? 'show' : 'hide'">
<div class="tui-refresh-view">
<image
class="tui-refresh-icon"
:src="refreshIcon"
:style="{ width: tab.refreshing || pulling ? 0 : '20px' }"
:class="{ 'tui-refresh-icon-active': tab.refreshFlag }"
></image>
<loading-indicator class="tui-loading-icon" animating="true" v-if="tab.refreshing"></loading-indicator>
<text class="tui-loading-text">{
{
tab.refreshText }}</text>
</div>
</refresh>
<cell v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
<news-item :itemData="newsitem" @close="close(index1, index2)" :lastChild="index2 === tab.data.length - 1" @click="goDetail(newsitem)"></news-item>
</cell>
<cell class="tui-loading-more" v-if="tab.isLoading || tab.pageIndex > 3">
<text class="tui-loadmore-line" v-if="tab.pageIndex > 3"></text>
<text class="tui-loading-more-text">{
{
tab.loadingText }}</text>
</cell>
</list>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<scroll-view
class="tui-scroll-v"
refresher-enabled
:refresher-triggered="tab.refreshing"
refresher-background="#fafafa"
enable-back-to-top
:refresher-threshold="100"
scroll-y
@scrolltolower="loadMore(index1)"
@refresherrefresh="onrefresh"
>
<view v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
<news-item :itemData="newsitem" @close="close(index1, index2)" :lastChild="index2 === tab.data.length - 1" @click="goDetail(newsitem)"></news-item>
</view>
<view class="tui-loading-more" v-if="tab.isLoading || tab.pageIndex > 3">
<text class="tui-loadmore-line" v-if="tab.pageIndex > 3"></text>
<text class="tui-loading-more-text">{
{
tab.loadingText }}</text>
</view>
</scroll-view>
<!-- #endif -->
</swiper-item>
</swiper>
</view>
</template>
<script>
import newsItem from './news-item.nvue';
// Cache maximum pages
const MAX_CACHE_PAGEINDEX = 3;
// Number of cache tabs
const MAX_CACHE_PAGE = 3;
const newsData = [
{
title: ' Teachers should keep these words in mind ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3101,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' CCTV news '
},
{
title: ' The United States will vote to approve the new ambassador to China It is expected to go to China at the end of this month ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3102,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' CCTV news '
},
{
title: ' Which majors have high income after graduation ? Computer 、 The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3103,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Guangdong Hong Kong Elite Alliance '
},
{
title: ' The sci tech Innovation Board trading system is ready , There is no first list ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3104,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Encyclopedia stories '
},
{
title: ' Which majors have high income after graduation ? Computer 、 The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first. The financial specialty ranks first ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3103,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Guangdong Hong Kong Elite Alliance '
},
{
title: ' The sci tech Innovation Board trading system is ready , There is no first list ',
image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
comment_count: 3104,
vote_count: 2356,
dateTime: '2020-01-01',
article_type: 1,
source: ' Encyclopedia stories '
},
];
export default {
components: {
newsItem
},
data() {
return {
isIos: false,
newsList: [],
cacheTab: [],
tabIndex: 0,
tabBars: [
{
name: ' hot ',
id: 'hot'
},
{
name: ' entertainment ',
id: 'yule'
},
{
name: ' sports ',
id: 'sports'
},
{
name: ' At home ',
id: 'domestic'
},
{
name: ' Finance and economics, ',
id: 'finance'
},
{
name: ' Technology ',
id: 'keji'
},
{
name: ' education ',
id: 'education'
},
{
name: ' automobile ',
id: 'car'
}
],
scrollInto: '',
showTips: false,
navigateFlag: false,
pulling: false,
refreshIcon:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRBAMAAABYoVcFAAAAKlBMVEUAAACXl5eZmZmfn5+YmJiXl5eampqZmZmYmJiYmJiZmZmYmJiZmZmZmZl02B9kAAAADXRSTlMAQKAQ0GAsUN+wz5CA21ow0AAAAM5JREFUSMftzLEJAkEQheFR4WzjGji4wC5E0A7E0OgaEIwF4RqwJEEODKcX1114yQ/uhsLtY6Lh57NZ7Dz1heXd27Kwcb+WlQv3Vy1rWcta1rKW/1Q2R8PWt8FYdhPLi79ZLt33KB/hibJzH1E+PaAqRfqAcuMBVSlyMmy1C6hKka0CoCpBAlUJEmgsQQJVCRKoSpBAU0mSaCpJEk0lSSMaS5JG9FuK/IkeQkmSaEjikSSaRpJoHEmiIvOoyCwqMo+KzKMi8+hoZTtte5vDPrSGI5zJ/Z1kAAAAAElFTkSuQmCC'
};
},
onLoad() {
setTimeout(() => {
this.newsList = this.randomfn();
uni.getSystemInfo({
success: res => {
this.isIos = 'ios' == res.platform.toLocaleLowerCase();
}
});
}, 200);
},
methods: {
randomfn() {
let ary = [];
for (let i = 0, length = this.tabBars.length; i < length; i++) {
let aryItem = {
loadingText: ' Being loaded ...',
refreshing: false,
refreshText: '',
data: [],
isLoading: false,
pageIndex: 1
};
if (i === 0) {
aryItem.pageIndex = 2;
aryItem.data = aryItem.data.concat(newsData);
}
ary.push(aryItem);
}
console.log(ary)
return ary;
},
getList(index, refresh) {
let activeTab = this.newsList[index];
let list = newsData || [];
if (refresh) {
activeTab.data = [];
activeTab.loadingText = ' Being loaded ...';
activeTab.pageIndex = 2;
activeTab.data = list || [];
} else {
activeTab.data = activeTab.data.concat(list);
activeTab.pageIndex++;
activeTab.isLoading = false;
// Modify the judgment conditions according to the actual conditions
if (activeTab.pageIndex > 3) {
activeTab.loadingText = ' There is no more ';
}
}
},
goDetail(e) {
if (this.navigateFlag) return;
this.navigateFlag = true;
uni.navigateTo({
url: '/pages/template/news/newsDetail/newsDetail'
});
setTimeout(() => {
this.navigateFlag = false;
}, 200);
},
loadMore(e) {
let activeTab = this.newsList[this.tabIndex];
if (activeTab.pageIndex < 4 && !activeTab.isLoading) {
activeTab.isLoading = true;
setTimeout(() => {
this.getList(this.tabIndex);
}, 300);
}
},
tabClick(e) {
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.switchTab(index);
},
tabChange(e) {
let index = e.target.current || e.detail.current;
this.switchTab(index);
},
switchTab(index) {
if (this.tabIndex === index) return;
if (this.newsList[index].data.length === 0) {
this.getList(index);
}
// cache tabId
if (this.newsList[this.tabIndex].pageIndex > MAX_CACHE_PAGEINDEX) {
let isExist = this.cacheTab.indexOf(this.tabIndex);
if (isExist < 0) {
this.cacheTab.push(this.tabIndex);
//console.log("cache index:: " + this.tabIndex);
}
}
this.tabIndex = index;
let scrollIndex = index - 1 < 0 ? 0 : index - 1;
this.scrollInto = this.tabBars[scrollIndex].id;
// Release tabId
if (this.cacheTab.length > MAX_CACHE_PAGE) {
let cacheIndex = this.cacheTab[0];
this.clearTabData(cacheIndex);
this.cacheTab.splice(0, 1);
//console.log("remove cache index:: " + cacheIndex);
}
},
clearTabData(e) {
this.newsList[e].data.length = 0;
this.newsList[e].loadingText = ' Load more ...';
},
onrefresh(e) {
var tab = this.newsList[this.tabIndex];
// #ifdef APP-PLUS
if (!tab.refreshFlag) {
return;
}
// #endif
// #ifndef APP-PLUS
if (tab.refreshing) {
return;
}
// #endif
tab.refreshing = true;
tab.refreshText = ' Refreshing ...';
setTimeout(() => {
this.getList(this.tabIndex, true);
this.pulling = true;
tab.refreshing = false;
tab.refreshFlag = false;
tab.refreshText = ' Refresh successful ';
// #ifndef H5
uni.showToast({
title: ' Refresh successful ',
icon: 'none'
});
// #endif
setTimeout(() => {
// TODO fix ios and Android The animation time is opposite
this.pulling = false;
}, 500);
}, 1000);
},
onpullingdown(e) {
var tab = this.newsList[this.tabIndex];
if (tab.refreshing || this.pulling) {
return;
}
if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
tab.refreshFlag = true;
tab.refreshText = ' Release refresh now ';
} else {
tab.refreshFlag = false;
tab.refreshText = ' Drop down to refresh ';
}
}
}
};
</script>
<style>
/* #ifndef APP-PLUS */
page {
width: 100%;
min-height: 100%;
display: flex;
}
/* #endif */
.tui-tabs {
flex: 1;
flex-direction: column;
overflow: hidden;
background-color: #fafafa;
/* #ifdef MP-ALIPAY || MP-BAIDU */
height: 100vh;
/* #endif */
}
.tui-scroll-h {
width: 750rpx;
height: 80rpx;
background-color: #ffffff;
flex-direction: row;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
/* #ifdef H5 */
position: fixed;
top: 44px;
left: 0;
z-index:999;
/* #endif */
}
.tui-line-h {
/* #ifdef APP-PLUS */
height: 1rpx;
background-color: #cccccc;
/* #endif */
position: relative;
}
/* #ifndef APP-PLUS*/
.tui-line-h::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #cccccc;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 0;
}
/* #endif */
.tui-tab-item {
/* #ifndef APP-PLUS */
display: inline-block;
/* #endif */
flex-wrap: nowrap;
padding-left: 34rpx;
padding-right: 34rpx;
}
.tui-tab-item-title {
color: #555;
font-size: 30rpx;
height: 80rpx;
line-height: 80rpx;
flex-wrap: nowrap;
/* #ifndef APP-PLUS */
white-space: nowrap;
/* #endif */
}
.tui-tab-item-title-active {
color: #5677fc;
font-size: 36rpx;
font-weight: bold;
border-bottom-width: 6rpx;
border-style: solid;
border-color: #5677fc;
text-align: center;
}
.tui-swiper-box {
flex: 1 !important;
/* #ifdef H5 */
margin-top: 80rpx;
/* #endif */
}
.tui-swiper-item {
flex: 1 !important;
flex-direction: row;
}
.tui-scroll-v {
flex: 1;
/* #ifndef MP-ALIPAY */
flex-direction: column;
/* #endif */
width: 750rpx;
}
.tui-update-tips {
position: absolute;
left: 0;
top: 41px;
right: 0;
padding-top: 5px;
padding-bottom: 5px;
background-color: #fddd9b;
align-items: center;
justify-content: center;
text-align: center;
}
.tui-update-tips-text {
font-size: 14px;
color: #ffffff;
}
.tui-refresh {
width: 750rpx;
height: 64px;
justify-content: center;
}
.tui-refresh-view {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.tui-refresh-icon {
width: 20px;
height: 20px;
transition-duration: 0.25s;
transition-property: transform;
transform: rotate(0deg);
transform-origin: 10px 10px;
}
.tui-refresh-icon-active {
transform: rotate(180deg);
}
.tui-loading-icon {
width: 20px;
height: 20px;
margin-right: 5px;
color: #999999;
}
.tui-loading-text {
margin-left: 2px;
font-size: 14px;
color: #999999;
}
.tui-loading-more {
align-items: center;
justify-content: center;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
position: relative;
}
.tui-loadmore-line {
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #e5e5e5;
width: 320rpx;
position: absolute;
z-index: -1;
}
.tui-loading-more-text {
padding-left: 8rpx;
padding-right: 8rpx;
font-size: 28rpx;
line-height: 28rpx;
background-color: #fafafa;
text-align: center;
color: #999;
}
</style>
3、 ... and 、 Code of common subcomponents
newsItem.vue Component code
<template>
<view class="media-item" v-if="itemData.title" @click="click">
<view class="main">
<text class="media-title media-title2">{
{
itemData.title}}</text>
<view v-if="itemData.image_url" class="image-section flex-row image-section-left">
<image class="image-list1 image-list2" :src="itemData.image_url"></image>
</view>
</view>
<view class="media-foot flex-row">
<view class="media-info flex-row">
<text class="info-text">{
{
itemData.source}}</text>
<text class="info-text">{
{
itemData.comment_count}} comments </text>
<text class="info-text">{
{
itemData.vote_count}} Article voting </text>
<text class="info-text">{
{
itemData.dateTime}}</text>
</view>
</view>
<view class="media-item-line" style="position: absolute;"></view>
</view>
</template>
<script>
export default {
props: {
itemData: {
type: Object,
default: () => {
}
}
},
methods: {
click() {
this.$emit('click');
},
}
}
</script>
<style scoped>
.main {
flexDirection: row-reverse;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.list-cell {
padding: 0 30upx;
}
.uni-list-cell-hover {
background-color: #eeeeee;
}
.media-item {
position: relative;
flex: 1;
flex-direction: column;
padding: 20upx 30upx 21upx 30upx;
}
.media-item-line {
position: absolute;
left: 30upx;
right: 30upx;
bottom: 0;
height: 1upx;
background-color: #ebebeb;
}
.media-image-right {
flex-direction: row;
}
.media-image-left {
flex-direction: row-reverse;
}
.media-title {
flex: 1;
}
.media-title {
lines: 3;
text-overflow: ellipsis;
font-size: 30upx;
color: #555555;
}
.media-title2 {
flex: 1;
margin-top: 6upx;
line-height: 40upx;
}
.image-section {
margin-top: 20upx;
flex-direction: row;
justify-content: space-between;
}
.image-section-right {
margin-top: 0upx;
margin-left: 10upx;
width: 225upx;
height: 146upx;
}
.image-section-left {
margin-top: 0upx;
margin-right: 10upx;
width: 225upx;
height: 146upx;
}
.image-list1 {
width: 690upx;
height: 481upx;
}
.image-list2 {
width: 225upx;
height: 146upx;
}
.image-list3 {
width: 225upx;
height: 146upx;
}
.media-info {
flex-direction: row;
align-items: center;
}
.info-text {
margin-right: 20upx;
color: #999999;
font-size: 24upx;
}
.media-foot {
margin-top: 25upx;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.close-view {
position: relative;
align-items: center;
flex-direction: row;
width: 40upx;
height: 30upx;
line-height: 30upx;
border-width: 1upx;
border-style: solid;
border-color: #aaaaaa;
border-radius: 4px;
justify-content: center;
text-align: center;
}
.close-l {
position: absolute;
width: 18upx;
height: 1upx;
background-color: #aaaaaa;
}
.close-h {
transform: rotate(45deg);
}
.close-v {
transform: rotate(-45deg);
}
</style>
边栏推荐
- Screen recording to GIF is an easy-to-use gadget, screentogif, which is free and easy to use!
- 字符串
- 后序线索二叉树
- C. Yet Another Card Deck-Educational Codeforces Round 107 (Rated for Div. 2)
- BI-SQL丨存储过程（一）
- 统计字符串中不同回文子序列的个数
- 谷歌浏览器（Chrome）最新v80版本下载
- Leetcode (435) - no overlapping interval
- Go语言逃逸分析全纪录
- Style setting when there is a separator in the qcombobox drop-down menu
猜你喜欢
Graduation trip | recommended 5-day trip to London
Bi-sql stored procedure (I)
Idea auto generator generates constructor get/set methods, etc
What is Unified Extensible Firmware Interface (UEFI)?
RepOptimizer: 其实是RepVGG2
Ble Low Power Bluetooth networking process and Bluetooth role introduction
What is Unified Extensible Firmware Interface (UEFI)?
Rk3568+ Hongmeng industrial control board industrial gateway video gateway solution
CAD中图纸比较功能怎么用
Repoptimizer: it's actually repvgg2
随机推荐
hiberate架构介绍及环境搭建(非常详细)
Uniapp - call payment function: Alipay
[opencv450 samples] create image list yaml
Bi-sql stored procedure (I)
音频基础知识以及PCM转WAV
LeetCode-1528-重新排列字符串-哈希表-字符串
[Axi] interpretation of Axi protocol disorder mechanism
How does excel translate Chinese words into English automatically? This formula teaches you
Ad20 learning notes II
golang Make a list of intervals with sequential numbers
konva系列教程2：绘制图形
What is Unified Extensible Firmware Interface (UEFI)?
The first public available pytorch version alphafold2 is reproduced, and Columbia University is open source openfold, with more than 1000 stars
Extraction system apk
CTS RTS RX TX in serial port flow control UART (direct communication between serial port module and MCU)
Informatics Orsay all in one 1353: expression bracket matching | Luogu p1739 expression bracket matching
指针强化与提高
头歌 第3关：使用线程锁（Lock）实现线程同步
Day3 data types and operators summary and job
社招两年半10个公司28轮面试面经（含字节、拼多多、美团、滴滴......）