uni-app实现上下菜单联动

学习记录

内容部分：


<template><view><!-- 项目 --><view class="project-lists"><!-- 滚动菜单栏--><scroll-view class="rescue-tab" scroll-x="true" :scroll-left="scrollLeft"><block v-for="(item, index) in tabData" :key="index"><view class="tab-item" :class="[currentTab == index ? 'active' : 'none']" :data-current="index"@click="clickTab">{{ item.catname }}</view></block></scroll-view><!--对应内容--><swiper class="swiper" :current="currentTab" duration="300" @change="swiperTab" :style="{ height: windowHeight + 'px' }"><swiper-item v-for="(item, index) in tabData" :key="index"><scroll-view scroll-y="true" :style="{height: windowHeight +'px'}" @scrolltolower="getMore"><view @click="itemClick" class="rescue-course bg marb30" v-for="(pro,index) in proList" :key="index"><navigator :url="'show?id=' +pro.id" class="project" ><view class="text">{{pro.title}}</view><image :src="baseUrl +pro.thumb" mode=""></image></navigator></view><!-- 加载更多 --><uni-load-more v-if="moreStaus" :status="status" :content-text="contentText"></uni-load-more></scroll-view></swiper-item></swiper></view></view>
</template>

js部分：

<script>export default {data() {return {loading: true, // 是否显示骨架屏组件baseUrl: this.baseURL,currentTab: 0, //标签初始位置scrollLeft: 0, //tab标题的滚动条位置windowHeight: 0,windowWidth: 0,conindex: 0,//初始化筛选值botShow: false, //全部加载完毕初始值moreStaus: false, //是否显示加载更多status: "more", // 加载数据样式curpage: 1,tabData: [],proList: [],contentText: {contentdown: '上拉加载更多~',contentrefresh: '加载中...',contentnomore: '没有更多数据了'},tabData: [{ catname: '全部',catid: 'project'}],};},onLoad(option) {wx.getSystemInfo({//获取系统信息success: res => {this.windowHeight = res.windowHeight;this.windowWidth = res.windowWidth;}});uni.request({url: '请求的接口',data: {传入所需要的参数},success: (res) => {  //成功之后的回调if (res.data.code >= 0) {this.tabData.push(...res.data.data)}},fail: (res) => {console.log(err)}});this.proGet() //内容列表接口请求},methods: {clickTab(e) {let clickIndex = e.target.dataset.current; //当前标签的索引let singleNavWidth = this.windowWidth / 4; //每个标签的宽度, 显示5个标签this.scrollLeft = (clickIndex - 2) * singleNavWidth; //水平滚动条位置, tab选项居中if (this.currentTab === clickIndex) {return false;} else {this.currentTab = clickIndex; //使页面对应标签this.curpage = 1; //初始化请求状态this.botShow = false;this.proList.length = 0;this.moreStaus = false;this.status = 'more';this.proGet(this.curpage)}},swiperTab(e) {let swiperIndex = e.detail.current; //当前页面的索引let singleNavWidth = this.windowWidth / 4; //每个标签的宽度 ,显示5个标签this.scrollLeft = (swiperIndex - 2) * singleNavWidth; //使标签跟随页面滚动,超过屏幕范围的标签显示出来this.currentTab = swiperIndex; //使标签对应页面this.conindex = 0; //初始化筛选值this.listChange = true; //列表状态this.curpage = 1;this.moreStaus = false;this.botShow = false;this.proList.length = 0;// 加载更多样式修改this.status = 'more';this.proGet(this.curpage)},proGet(curpage) {this.tabData.forEach((item, index) => {if (index == this.currentTab) {this.requer({//请求相应导航下面的内容url: '',data: {catid: item.catid,page: curpage //当前页面},success: res => {this.proList.push(...res.data);this.moreStaus = true;//去重for (let i = 0; i < this.proList.length; i++) {for (let j = i + 1; j < this.proList.length; j++) {if (this.proList[i].id === this.proList[j].id) {this.proList.splice(j, 1);j = j - 1;}}};if (res.data.length < 10) {this.status = 'noMore'};if (res.data.length == 0) {//当data数组长度为0时，botShow的值为真this.botShow = true;this.status = 'noMore'}},});}});},// 加载更多getMore() {// console.log(11);this.status = 'loading';// 判断，当show为假时才发送请求if (!this.botShow) {this.proGet(++this.curpage);} else {this.status = 'noMore';}},}};
</script>

css部分：

<style lang="less" scoped>.project-lists {padding-top: 130rpx;// padding-bottom: 110rpx;height: 100%;.rescue-tab {width: 100%;box-sizing: border-box;overflow: hidden;background: #ffffff;font-size: 30rpx;white-space: nowrap;position: fixed;top: 0;left: 0;z-index: 99;.tab-item {width: 20%;display: inline-block;text-align: center;padding: 30rpx 0;border-bottom: 4rpx solid #fff;}.active {color: #fe4e5b;border-bottom: 4rpx solid #fe4e5b;}}}// 公益项目.project {// width: 700rpx;background-color: #FFFFFF;margin: 0 auto;// margin-top: 20rpx;.text {color: #211f1f;font-size: 32rpx;height: 67rpx;padding: 0 33rpx;padding-top: 24rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}image {width: 700rpx;height: 395rpx;margin: auto;text-align: center;display: block;margin-top: 26rpx;}.item-content {display: flex;justify-content: space-between;padding: 28rpx;.lf {display: flex;color: #9d9d9d;font-size: 26rpx;i {color: #FF5A5F;}}.rf {color: #FFFFFF;font-size: 30rpx;background-color: #FF5A5F;padding: 5rpx 10rpx;border-radius: 6rpx;}}}</style>

uni-app实现上下菜单联动相关推荐

Android 多级菜单联动操作
今天是分享一个android实现三级菜单联动效果,到了第三级菜单有点复杂,下面带着大家看下代码. 项目结构: 为了让大家更有的耐心的阅读, 我先从简单的开始说起,我们先看下demo实现的效果吧!这样可 ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
PHP随机配菜_PHP+JS三级菜单联动菜单实现方法
本文实例讲述了PHP+JS三级菜单联动菜单实现方法.分享给大家供大家参考,具体如下: 智能递归菜单-读取数据库 TD { FONT-FAMILY: "Verdana", " ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
js_jQuery【下拉菜单联动dom操作】
下拉菜单联动dom操作案例源码: <!DOCTYPE html> <html lang="en"><head><meta charset ...
vue 左右滑动菜单_Vue实现左右菜单联动实现代码
本文介绍了Vue实现左右菜单联动实现代码吗,分享给大家,也给自己留个笔记,具体如下: 之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用 Vue 来实现,将这个联动抽离成为一个单独的 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
Flutter 左右菜单联动
效果: 像这种左右菜单联动的效果很常见,即点击左边菜单列表右边刷新,这里演示一下在Flutter中的实现页面结构很简单,分为左右结构,左边是一个ListView,右边也是一个ListView,然后 ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

uni-app实现上下菜单联动

uni-app实现上下菜单联动相关推荐

最新文章

热门文章