当前位置：网站首页>Uniapp switches the tab bar to display different pages, remembers the page location and pulls up to get new data
Uniapp switches the tab bar to display different pages, remembers the page location and pulls up to get new data
2022-07-23 07:36:00 【1024 little god】
1. Switch between different tab Column implementation uses ：
<scroll-view class="menus" scroll-x :show-scrollbar="false">
<view class="item" :class="{active:activeNum === index}" v-for="(item, index) in menuList" :key="index"
@click="toMenu(index, item)">
{
{item}}
</view>
</scroll-view>
2. Different tab Binding with pages uses ：
Custom components , Applied in the establishment uview Of u-list.
3. Core code ：
For every one tab Render one MenuList Components
<MenuList v-for="(item, index) in menuNumList" v-show="activeNum === item" :menuName="menuName"> </MenuList>At first, I only placed one menuLis Components , By passing tabid And name to achieve content switching display , But the result is , be-all tab Shared one menulist Components , Cause this to slide tab page , Switch to another tab, It will start to show again tab The content of , I can't remember this at all tab Page location for .
To think about each tab Remember your position , And after switching back , It's still where it was , mutual tab It doesn't affect , You have to let everyone tab Each has its own container to display its own data , And only in this way can you remember your position .
4. As for getting new data after pulling up to the bottom ,
Fortunately uview in u-list There are already encapsulated methods that can be used ：@scrolltolower="scrolltolower",
Because the page scrolls, it is uncertain which element is scrolling , You can use the following article to locate ：js Identify rolling elements and resolve tab Toggle scroll position independent _1024 Xiaoshen's blog -CSDN Blog
uview How to use the list in ：
List list | uView 2.0 - Full compatibility nvue Of uni-app Ecological framework - uni-app UI frame
Here's another thing to note , To give u-list And parent tags news Add height , Otherwise, this scrolltolower Methods may not work ：
I'll take care of it MenuList Component code ：
<template>
<view class="news">
<u-list class="new-list" @scrolltolower="scrolltolower" lowerThreshold="150">
<u-list-item>
<text class="title"> Menu news list ---{
{menuName}}</text>
</u-list-item>
<u-list-item class="new-item" v-for="(item, index) in articleList" :key="index">
<view :class="{'new-content': item.imgList.length === 1}">
<view class="new-title" :class="{'title-three':item.imgList.length === 1}">
{
{item.title}}
</view>
<view class="new-imgs" v-if="item.imgList.length > 0">
<image :src="imgUrl" mode="scaleToFill" v-for="(imgUrl, index) in item.imgList" :key="index"
class="pre-img" :class="{'one-img':item.imgList.length === 1}">
</image>
</view>
</view>
<view class="new-info">
<text class="info">{
{item.author}}</text>
<text class="info">{
{item.commites}} Comment on </text>
<text class="info">{
{item.timer}} Hours before </text>
</view>
</u-list-item>
</u-list>
</view>
</template>
<script>
export default {
data() {
return {
articleList: [{
title: " Use uni-app Provided scroll-view Components ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/539ee665a9a7bfc58303467aa27421fe.jpeg",
"https://img-blog.csdnimg.cn/img_convert/083a2793a43d8d5e464cdaf84920f44f.jpeg",
"https://img-blog.csdnimg.cn/img_convert/31e1bedc46adf2d5448f18dfd60e0b70.gif"
],
author: " The People's Daily ",
commites: "100",
timer: "10"
},
{
title: " This switching is no matter in app The end is still an applet or H5 Pages are very common functions ",
imgList: [],
author: " kwangmyong ",
commites: "16",
timer: "8"
},
{
title: " Of course, at this time, there is strength and mind to appreciate , Overwhelming expanse and impeccable blue ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",
"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",
"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"
],
author: "1024 Little god ",
commites: "36",
timer: "9"
},
{
title: " Such a city , It's a small area , There seems to be only one main street , After breakfast, we went for a walk , But I found that none of the stores opened . I didn't know they would keep the door closed like this , Or is it just that our visit is too early ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"
],
author: " kwangmyong ",
commites: "66",
timer: "1"
},
{
title: " A little farther away, there is a place built in Lighthouse Under the RV camp , It seems lively . The beach in front of the camp is covered with weeds , The sea breeze blew , A bleak salty smell ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",
"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",
"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"
],
author: " Photography base ",
commites: "23",
timer: "2"
},
{
title: " This switching is no matter in app The end is still an applet or H5 Pages are very common functions ",
imgList: [],
author: " kwangmyong ",
commites: "16",
timer: "8"
},
{
title: " Of course, at this time, there is strength and mind to appreciate , Overwhelming expanse and impeccable blue ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",
"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",
"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"
],
author: "1024 Little god ",
commites: "36",
timer: "9"
},
{
title: " Such a city , It's a small area , There seems to be only one main street , After breakfast, we went for a walk , But I found that none of the stores opened . I didn't know they would keep the door closed like this , Or is it just that our visit is too early ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"
],
author: " kwangmyong ",
commites: "66",
timer: "1"
},
{
title: " A little farther away, there is a place built in Lighthouse Under the RV camp , It seems lively . The beach in front of the camp is covered with weeds , The sea breeze blew , A bleak salty smell ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",
"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",
"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"
],
author: " Photography base ",
commites: "23",
timer: "2"
},
{
title: " This switching is no matter in app The end is still an applet or H5 Pages are very common functions ",
imgList: [],
author: " kwangmyong ",
commites: "16",
timer: "8"
},
{
title: " Of course, at this time, there is strength and mind to appreciate , Overwhelming expanse and impeccable blue ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",
"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",
"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"
],
author: "1024 Little god ",
commites: "36",
timer: "9"
},
{
title: " Such a city , It's a small area , There seems to be only one main street , After breakfast, we went for a walk , But I found that none of the stores opened . I didn't know they would keep the door closed like this , Or is it just that our visit is too early ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"
],
author: " kwangmyong ",
commites: "66",
timer: "1"
},
{
title: " A little farther away, there is a place built in Lighthouse Under the RV camp , It seems lively . The beach in front of the camp is covered with weeds , The sea breeze blew , A bleak salty smell ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",
"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",
"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"
],
author: " Photography base ",
commites: "23",
timer: "2"
},
{
title: " This switching is no matter in app The end is still an applet or H5 Pages are very common functions ",
imgList: [],
author: " kwangmyong ",
commites: "16",
timer: "8"
},
{
title: " Of course, at this time, there is strength and mind to appreciate , Overwhelming expanse and impeccable blue ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",
"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",
"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"
],
author: "1024 Little god ",
commites: "36",
timer: "9"
},
{
title: " Such a city , It's a small area , There seems to be only one main street , After breakfast, we went for a walk , But I found that none of the stores opened . I didn't know they would keep the door closed like this , Or is it just that our visit is too early ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"
],
author: " kwangmyong ",
commites: "66",
timer: "1"
},
{
title: " A little farther away, there is a place built in Lighthouse Under the RV camp , It seems lively . The beach in front of the camp is covered with weeds , The sea breeze blew , A bleak salty smell ",
imgList: [
"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",
"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",
"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"
],
author: " Photography base ",
commites: "23",
timer: "2"
}
]
}
},
props: {
menuName: {
default: " Default ",
type: String
}
},
onPullDownRefresh() {
console.log(" The drop-down refresh ");
this.timer = setInterval(() => {
uni.stopPullDownRefresh()
clearInterval(this.timer)
}, 1000)
uni.showToast({
title: ' Data updated ....',
duration: 2000
});
},
methods: {
scrolltolower() {
console.log(" Rolling to the bottom ");
uni.showToast({
title: ' Data updated ....',
duration: 2000
});
}
}
}
</script>
<style scoped lang="scss">
// .menu-list {
// height: 100vh;
// overflow-y: auto;
// }
.new-list {
// To set a height , Otherwise it will not work
height: 95vh;
overflow-y: auto;
.new-item {
::v-deep .u-cell__body {
padding: 10px 0px 10px 5px;
}
}
}
.news {
padding: 5rpx 20rpx;
height: 95vh;
overflow-y: auto;
.title {
display: inline-block;
width: 97%;
padding: 10rpx;
font-size: 35rpx;
font-weight: 600;
border-bottom: 1px solid #ccc;
}
.new-item {
padding: 10rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #eee;
.new-content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.new-title {
flex: 2;
font-size: 35rpx;
margin-bottom: 10rpx;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.title-three {
height: 70px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.new-imgs {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
.pre-img {
width: 33%;
height: 180rpx;
}
.one-img {
width: 100%;
}
}
.new-info {
margin-top: 10rpx;
.info {
font-size: 30rpx;
color: gray;
margin-right: 20rpx;
}
}
}
}
</style>
Pull down to the bottom and update the data ：
Home code ：
<template>
<view class="content">
<!-- Head menu navigation -->
<view class="navigate">
<scroll-view class="menus" scroll-x :show-scrollbar="false">
<view class="item" :class="{active:activeNum === index}" v-for="(item, index) in menuList" :key="index"
@click="toMenu(index, item)">
{
{item}}
</view>
</scroll-view>
</view>
<!-- home page / Menu page -->
<Dashboard v-show="activeNum === 0"></Dashboard>
<!-- Category menu display ： Different menus have different lists -->
<MenuList v-for="(item, index) in menuNumList" v-show="activeNum === item" :menuName="menuName"> </MenuList>
</view>
</template>
<script>
import Dashboard from "./components/Dashboard.vue"
import MenuList from "./components/MenuList.vue"
export default {
data() {
return {
title: 'Hello',
activeNum: 0,
menuName: "",
timer: null,
menuList: [" home page ", " life ", " Programming ", " front end ", " data ", " Reptiles ", " Software ", " technology ", " The beautiful ", " tourism "]
}
},
onLoad() {},
computed: {
menuNumList() {
var arr = new Array();
for (var i = 1; i < this.menuList.length; i++) {
arr.push(i)
}
return arr
}
},
onPullDownRefresh() {
console.log(" The drop-down refresh ");
this.timer = setInterval(() => {
uni.stopPullDownRefresh()
clearInterval(this.timer)
}, 1000)
uni.showToast({
title: ' Data updated ....',
duration: 2000
});
},
// onReachBottom() {
// uni.showToast({
// title: ' home page onReachBottom Data updated ....',
// duration: 2000
// });
// },
components: {
Dashboard,
MenuList
},
methods: {
toMenu(index, menuName) {
this.activeNum = index;
this.menuName = menuName
console.log(" Currently active index by ", index);
},
isMenu(index) {
console.log("index", index);
if (this.activeNum === 0) {
return false
} else {
console.log("activeNum", this.activeNum === index);
return this.activeNum === index
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding-top: 42px;
.navigate {
position: fixed;
top: 44px;
// #ifdef APP-PLUS
top: 0px;
// #endif
background-color: #fff;
z-index: 999;
width: 100%;
height: 70rpx;
line-height: 70rpx;
color: black;
border-bottom: 1px solid #eee;
.menus {
width: 100%;
height: 70rpx;
line-height: 70rpx;
white-space: nowrap;
.item {
text-align: center;
display: inline-block;
width: 100rpx;
box-sizing: border-box;
margin-left: 20rpx;
// margin-top: 3px;
}
.active {
color: #f85959;
}
}
}
}
</style>
边栏推荐
- VR全景动物园，成就不一样的动物园名片
- 从BIO到实现简单多人聊天室功能--IO模型
- How to make a high-quality VR panorama? Are there any simple ones that can be taken?
- 银行虚拟人技术应用领域及作用介绍
- [technology popularization] alliance chain layer2- on a new possibility
- STM32CubeIDE链接脚本讲解
- 【每日一题】757. 设置交集大小至少为2
- 《postgresql指南--内幕探索》第一章 数据库集簇、数据库和数据表
- Clever use of curl
- Google cloud and Oracle cloud are "hot"? It is imperative to deploy cross cloud disaster recovery!
猜你喜欢
小程序毕设作品之微信酒店预订小程序毕业设计（6）开题答辩PPT
Wechat campus second-hand book trading applet graduation design finished product (1) development outline
小程序毕设作品之微信校园二手书交易小程序毕业设计成品（1）开发概要
《postgresql指南--内幕探索》第三章查询处理
正版Adobe软件来了！Adobe全球唯一正版全家桶订阅只需0元/年
Understanding service governance in distributed development
Nftscan and ATEM network have reached strategic cooperation in the field of NFT data
STM32CubeIDE链接脚本讲解
园区招商难在“哪”?产业园区招商引资困点难点问题盘点
GNU LD script command language (I)
随机推荐
7、学习MySQL 选择数据库
数字藏品启动千亿级市场
NFT Insider ＃67：巴塞罗那足球俱乐部推出首个NFT作品，迪拜推出国家元宇宙战略
Basic commands of redis' five basic data types
openGauss开源2周年，破解数据库生态痛点
"The time of a takeaway is not as valuable as that of a programmer": treat yourself as a person after reading a book? Power on
uniapp切换tab栏显示不同页面并记住页面位置和上拉获取新数据
小程序毕设作品之微信酒店预订小程序毕业设计（7）中期检查报告
Get to know layer in fluent for the first time
Small program completion work wechat campus second-hand book trading small program graduation design finished product (2) small program function
uTools 推荐
《postgresql指南--内幕探索》第三章查询处理
One dimensional array and object array in [c ＃ array]-c ＃
Redis basic type common commands
电子招标采购商城系统：优化传统采购业务，提速企业数字化升级
String in SQL Server_ Implementation of split function
聊聊并发编程的12种业务场景
Redis common basic configuration files
[technology popularization] alliance chain layer2- on a new possibility
Codeforces Round ＃807 (Div. 2) A - D