1.切换不同的tab栏实现代码：
<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.不同tab和页面绑定使用的是自定义组件，组件里套用的uview的u-list
3. 核心代码：为每一个tab都渲染一个MenuList组件
<MenuList v-for="(item, index) in menuNumList" v-show="activeNum === item" :menuName="menuName"> </MenuList>要想每个tab记住自己的位置，并且切换回去之后，还是原来的位置，相互tab之间不影响，就得让每一个tab都拥有自己的容器来展示自己的数据，并且只有这样才能记住自己的位置
4.至于上拉触底之后获取新数据，在uview中u-list已经有封装好的方法可以使用：@scrolltolower=”scrolltolower”，因为页面滚动导致不确定滚动的元素是哪个，可以用下面这篇文章来定位：js确定滚动元素和解决tab切换滚动位置独立
uview中的列表使用方法： List 列表 | uView 2.0 – 全面兼容nvue的uni-app生态框架 – uni-app UI框架
这里还要注意，要给u-list和父标签news添加高度，不然这个scrolltolower方法可能不会起作用：
我封装好的MenuList组件代码：
<template> <view class="news"> <u-list class="new-list" @scrolltolower="scrolltolower" lowerThreshold="150"> <u-list-item> <text class="title">菜单新闻列表---{{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}}评论</text> <text class="info">{{item.timer}}小时前</text> </view> </u-list-item> </u-list> </view></template><script> export default { data() { return { articleList: [{ title: "使用uni-app提供的scroll-view组件", 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: "人民日报", commites: "100", timer: "10" }, { title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能", imgList: [], author: "葫芦芥子博客", commites: "16", timer: "8" }, { title: "当然这时候还有力气和心思欣赏，应接不暇的辽阔与无暇的蓝", 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: "葫芦芥子博客", commites: "36", timer: "9" }, { title: "这样一座城市，面积不大，主要的街道似乎只有一条，早餐过后我们散步过去，却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门，还是只是我们的到访太早而已", imgList: [ "https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg" ], author: "葫芦芥子博客", commites: "66", timer: "1" }, { title: "稍远处有一处建在 灯塔 下的房车营地，倒是显得热闹一些。营地前的海滩上长满了荒草，海风吹来，一股萧瑟的咸腥味道", 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: "摄影基地", commites: "23", timer: "2" }, { title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能", imgList: [], author: "葫芦芥子博客", commites: "16", timer: "8" }, { title: "当然这时候还有力气和心思欣赏，应接不暇的辽阔与无暇的蓝", 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: "葫芦芥子博客", commites: "36", timer: "9" }, { title: "这样一座城市，面积不大，主要的街道似乎只有一条，早餐过后我们散步过去，却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门，还是只是我们的到访太早而已", imgList: [ "https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg" ], author: "葫芦芥子博客", commites: "66", timer: "1" }, { title: "稍远处有一处建在 灯塔 下的房车营地，倒是显得热闹一些。营地前的海滩上长满了荒草，海风吹来，一股萧瑟的咸腥味道", 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: "摄影基地", commites: "23", timer: "2" }, { title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能", imgList: [], author: "葫芦芥子博客", commites: "16", timer: "8" }, { title: "当然这时候还有力气和心思欣赏，应接不暇的辽阔与无暇的蓝", 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小神", commites: "36", timer: "9" }, { title: "这样一座城市，面积不大，主要的街道似乎只有一条，早餐过后我们散步过去，却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门，还是只是我们的到访太早而已", imgList: [ "https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg" ], author: "光明网", commites: "66", timer: "1" }, { title: "稍远处有一处建在 灯塔 下的房车营地，倒是显得热闹一些。营地前的海滩上长满了荒草，海风吹来，一股萧瑟的咸腥味道", 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: "摄影基地", commites: "23", timer: "2" }, { title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能", imgList: [], author: "葫芦芥子博客", commites: "16", timer: "8" }, { title: "当然这时候还有力气和心思欣赏，应接不暇的辽阔与无暇的蓝", 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: "葫芦芥子博客", commites: "36", timer: "9" }, { title: "这样一座城市，面积不大，主要的街道似乎只有一条，早餐过后我们散步过去，却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门，还是只是我们的到访太早而已", imgList: [ "https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg" ], author: "葫芦芥子博客", commites: "66", timer: "1" }, { title: "稍远处有一处建在 灯塔 下的房车营地，倒是显得热闹一些。营地前的海滩上长满了荒草，海风吹来，一股萧瑟的咸腥味道", 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: "摄影基地", commites: "23", timer: "2" } ] } }, props: { menuName: { default: "默认", type: String } }, onPullDownRefresh() { console.log("下拉刷新"); this.timer = setInterval(() => { uni.stopPullDownRefresh() clearInterval(this.timer) }, 1000) uni.showToast({ title: '数据已更新....', duration: 2000 }); }, methods: { scrolltolower() { console.log("滚动到底部了"); uni.showToast({ title: '数据已更新....', duration: 2000 }); } } }</script>tab页代码：
<template>
<view class="content">
<!-- 头部菜单导航 -->
<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>
<!-- 首页/菜单页 -->
<Dashboard v-show="activeNum === 0"></Dashboard>
<!-- 分类菜单展示：不同的菜单有不同的列表 -->
<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: ["首页", "生活", "编程", "前端", "数据", "爬虫", "软件", "技术", "美图", "旅游"]
}
},
onLoad() {},
computed: {
menuNumList() {
var arr = new Array();
for (var i = 1; i < this.menuList.length; i++) {
arr.push(i)
}
return arr
}
},
onPullDownRefresh() {
console.log("下拉刷新");
this.timer = setInterval(() => {
uni.stopPullDownRefresh()
clearInterval(this.timer)
}, 1000)
uni.showToast({
title: '数据已更新....',
duration: 2000
});
},
// onReachBottom() {
// uni.showToast({
// title: '首页onReachBottom数据已更新....',
// duration: 2000
// });
// },
components: {
Dashboard,
MenuList
},
methods: {
toMenu(index, menuName) {
this.activeNum = index;
this.menuName = menuName
console.log("当前激活index为", 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>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
云程APP官网,一个分享免费资源的网站，想你所想，白嫖所有资源，云程app小程序源码,微信小程序源码,云程白嫖网,白嫖源码网,反编译小程序,葫芦芥子博客云程APP,云程APP官网,云程工作室,葫芦芥子博客,葫芦侠,芥子空间,小程序源码网,QQ小程序源码
